`
jackroomage
  • 浏览: 1222634 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类

onmouseover 与onmouseout 的用法

JSPStrutsHTMLJavaScript 
阅读更多

1、例子##############################

<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
 <script>
 function imgover(img){
    var source=img.src;
   arr=source.substring(0,source.indexOf("_")-1);
   arr2=source.substring(source.indexOf("_"));
   arr=arr+"1"+arr2;
    img.src=arr;
   }
 function imgOut(img){
   var source=img.src;
   arr=source.substring(0,source.indexOf("_")-1);
   arr2=source.substring(source.indexOf("_"));
   arr=arr+"2"+arr2;
    img.src=arr;
  
  }
     </script>
</head>
 <body>
  <tr>
   <td rowspan="2">
   <!-- onmouseover触发 转到my.ftl页面 -->
    <a href="jack1.jsp"><img src="top02_05.jpg" width=100 height=50
    onmouseover="javaScript:location.href='my.ftl'" onmouseout="imgOut(this);" /></a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack1.jsp"><img src="top02_06.jpg" width=100 height=50
      onmouseover="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack1.jsp"><img src="top02_07.jpg" width=100 height=50
      onmouseover="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack1.jsp"><img src="top02_08.jpg" width=100 height=50
      onmouseover="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
  </tr>

 </body>
</html>
2、例子###############################################

 

<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
 <script>
 function imgover(img){
    var source=img.src;
   arr=source.substring(0,source.indexOf("_")-1);
   arr2=source.substring(source.indexOf("_"));
   arr=arr+"1"+arr2;
    img.src=arr;
   }
 function imgOut(img){
   var source=img.src;
   arr=source.substring(0,source.indexOf("_")-1);
   arr2=source.substring(source.indexOf("_"));
   arr=arr+"2"+arr2;
    img.src=arr;
  
  }
     </script>
</head>
 <body>
  <tr>
   <td rowspan="2">
   <!-- onmouseover放上鼠标触发转换页面与onmouseout离开触发转换页面 -->
    <a href="jack2.jsp"><img src="top02_05.jpg" width=100 height=50
    onmouseover="imgover(this)" onmouseout="imgOut(this);" /></a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack2.jsp"><img src="top02_06.jpg" width=100 height=50
      onmouseover="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack2.jsp"><img src="top02_07.jpg" width=100 height=50
      onmouseover="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack2.jsp"><img src="top02_08.jpg" width=100 height=50
      onmouseover="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
  </tr>

 </body>
</html>
3、例子###############################################

 

<%@page contentType="text/html; charset=utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
 <script>
 function imgover(img){
    var source=img.src;
   arr=source.substring(0,source.indexOf("_")-1);
   arr2=source.substring(source.indexOf("_"));
   arr=arr+"1"+arr2;
    img.src=arr;
   }
 function imgOut(img){
   var source=img.src;
   arr=source.substring(0,source.indexOf("_")-1);
   arr2=source.substring(source.indexOf("_"));
   arr=arr+"2"+arr2;
    img.src=arr;
  
  }
     </script>
</head>
 <body>
  <tr>
   <td rowspan="2">
   <!-- onclick点击触发转换页面与onmouseout离开触发转换页面 -->
    <a href="jack3.jsp"><img src="top02_05.jpg" width=100 height=50
    onclick="imgover(this)" onmouseout="imgOut(this);" /></a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack3.jsp"><img src="top02_06.jpg" width=100 height=50
      onclick="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack3.jsp"><img src="top02_07.jpg" width=100 height=50
      onclick="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
   <td rowspan="2">
    <a href="jack3.jsp"><img src="top02_08.jpg" width=100 height=50
      onclick="imgover(this)" onmouseout="imgOut(this);" /> </a>
   </td>
   <br>
  </tr>

 </body>
</html>

 

 

分享到：
| MyEclipse 6.5 中修改 jsp和java代码的 字 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现--简短版

    在本篇文章中，我们将探讨如何使用CSS和JavaScript来实现兼容IE和Firefox的鼠标经过效果（onmouseover和onmouseout）。在前端开发中，鼠标经过效果是一个非常常用的交互效果，然而不同的浏览器对其支持的方式不同，...

    onmouseover和onmouseout的一些问题思考

    为实现跨浏览器兼容的解决方案，可以使用`onmouseover`和`onmouseout`，并通过检查事件的`relatedTarget`或IE特有属性`fromElement`和`toElement`来模拟`onmouseenter`和`onmouseleave`的行为。下面的示例代码展示了...

    兼容ie和firefox的鼠标经过(onmouseover和onmouseout)实现–简短版

    本篇文章将探讨如何实现一个简短的兼容IE和Firefox的鼠标经过事件（onmouseover和onmouseout）的解决方案。 首先，让我们了解这两个事件。`onmouseover`事件在鼠标指针进入一个元素时触发，而`onmouseout`事件则在...

    使用JavaScript动态设置样式实现代码(2)

    在本文中，我们将探讨如何使用JavaScript中的onmouseover和onmouseout事件来动态改变HTML元素的样式。通过这种方式，我们可以实现鼠标悬停和移出时元素样式的不同效果。本文内容将帮助读者巩固JavaScript和CSS方面的...

    图片模糊化，支持FF/IE6以上

    3. onMouseOver与onMouseOut事件： - `onMouseOver`事件在鼠标指针进入元素时触发，可以用来切换图片的模糊状态。 - `onMouseOut`事件则在鼠标指针离开元素时触发，可以恢复图片的清晰状态。 - 这两个事件常用于...

    《javascript》——event对象与事件

    在教学中，需要特别强调 Event 对象的重要性和使用方法，以便学生能够正确地使用 Event 对象来处理用户的交互行为。 教学中需要注意的关键点包括： * onload 事件的使用：onload 事件是最重要的事件之一，它可以在...

    js下关于onmouseout、事件冒泡的问题经验小结.docx

    ### JavaScript 下关于 `onmouseout` 与事件冒泡的问题经验小结 ...无论是使用 jQuery 还是原生 JavaScript，都有多种方法可以解决由 `onmouseout` 事件引发的问题。希望本文能为您的开发工作带来帮助。

    JS event使用方法详解

    在页面中，我们可以为各种事件绑定处理函数，例如，使用onclick事件处理用户点击，使用onmouseover和onmouseout事件处理鼠标悬停等。这些事件会根据触发的具体条件，自动把event对象传递给对应的处理函数。 在事件...

    javascript中onmouse事件在div中失效问题的解决方法

    3. onmouseenter和onmouseleave事件：这两个事件与onmouseover和onmouseout事件类似，但它们不会发生事件冒泡。 4. event对象：在事件处理函数中，event对象包含了事件的详细信息，例如哪个事件触发了，事件发生的...

    GridView使用方法

    - 可以通过JavaScript或CSS实现，例如使用 `onmouseover` 和 `onmouseout` 事件来改变行的样式。 7. **实现删除时弹出确认对话框**： - 使用JavaScript的 `confirm()` 函数在执行删除操作前弹出确认提示。 8. **...

    js下关于onmouseout、事件冒泡的问题经验小结

    为了防止鼠标进入`div2`的子元素时`onmouseout`事件触发，使用了`onmousemove`事件来覆盖`onmouseout`事件。当鼠标在`div2`上移动时，`div2`的`display`样式被设置为空，当鼠标离开时，再次设置为`none`。这种方法...

    Event 对象的使用方法

    Event对象在Web开发中扮演着至关重要...理解并熟练使用这些属性和方法，可以让你创建更加交互性和响应性的Web应用。通过监听和响应各种事件，开发者可以创建丰富的用户体验，包括动态更新、用户验证和自定义交互效果。

    通用二级菜单代码

    这两个函数通过绑定到`onmouseover`和`onmouseout`事件上来控制二级菜单的显示与隐藏。 **关键JavaScript代码分析：** ```javascript function showDiv(divName) { document.getElementById(divName).style....

    javascript中window.event事件用法详解

    比如，fromElement 和 toElement 属性只对 onmouseover 和 onmouseout 事件有意义。 例子下面的例子检查鼠标是否在链接上单击，并且，如果shift键被按下，就取消链接的跳转。 代码如下: &lt;HTML&gt; &lt;HEAD&gt;&...

    动态HTML教程，这个教程比较简单，适合初级！

    1. **`onmouseover` 和 `onmouseout`**：当鼠标悬停在元素上时触发 `onmouseover` 事件，移开鼠标时触发 `onmouseout` 事件。 ```html &lt;h3 align="center" onmouseover="this.style.color='red'" onmouseout=...

    网页制作常用Javascript特效

    对于作为背景的插入图片，可以使用`onMouseOver`和`onMouseOut`事件来切换背景图片。例如： ```html &lt;img src="default.jpg" onMouseOver="this.src='hover.jpg'" onMouseOut="this.src='default.jpg'" alt="图片...

    javascript-yingyong.rar_javascript

    这涉及到CSS样式操作和JavaScript事件监听，如onmouseover和onmouseout事件，以及修改元素的style属性。 4. **动画2.html.bak**：可能包含JavaScript实现的简单动画效果，例如元素的平移、旋转或缩放。JavaScript...

    HTML中setCapture、releaseCapture 使用方法浅析

    Firefox 提供了`captureEvents`和`releaseEvents`，这两个方法与IE的`setCapture`和`releaseCapture`类似，但参数是一个事件类型，如`Event.MOUSE_DOWN`，允许更精确地控制要捕获的事件类型。 ### 总结 `...

    改变table中行的背景

    这里的关键在于每个`&lt;tr&gt;`（table row）元素都绑定了`onMouseOver`和`onMouseOut`事件处理器。这些事件处理器用于改变行的颜色，从而达到交互效果。 #### 解析关键属性 1. **`border`**: 设置表格边框的宽度，值为...

Magicbox
Global site tag (gtag.js) - Google Analytics