链接菜单w/MouseOver javascript

Linkmenu w/ MouseOver javascript

本文关键字：MouseOver javascript 菜单 链接      更新时间：2023-09-26

我的网站上有一个由图像链接组成的菜单，我想在每个菜单对象上都有一个不同的MouseOver函数，我试过这样做，但它总是适用于后面的脚本，所以当我悬停启动时，它会变为信息。

<script language="javascript">
  function MouseRollover(start) {
    start.src = "starthover.png";
  }
  function MouseOut(start) {
    start.src = "startidle.png";
  }
</script>
<script language="javascript">
  function MouseRollover(info) {
    info.src = "infohover.png";
  }
  function MouseOut(info) {
    info.src = "infoidle.png";
  }
</script>

对于链接，我得到了这个：

<a href="test.html">
  <img src="startidle.png" border="0px"
  onMouseOver="MouseRollover(this)" 
  onMouseOut="MouseOut(this)" />
</a>
<a href="test.html">
  <img src="infoidle.png" border="0px"
  onMouseOver="MouseRollover(this)" 
  onMouseOut="MouseOut(this)" />
</a>

我想知道是否有任何方法可以对这些功能进行分类，这样我就可以为菜单获得相同的功能但不同的图片？

您的第二个脚本正在覆盖第一个脚本，这意味着每次调用"MouseFollower"或"MouseOut"时，您的js都会使用第二个剧本。

您只能使用一个功能来交换图像，而不需要有四个功能。

<head>
  <script>
    function swapImg(element, img) {
      element.src = img;
    }
  </script>
</head>
<body>
  <a href="#">
    <img src="startidle.png" border="0px" width="150px" 
    onMouseOver="swapImg(this, 'img01.jpg')" 
    onMouseOut="swapImg(this, 'img02.jpg')" />
  </a>
  <a href="#">
    <img src="infoidle.png" border="0px" width="150px" 
     onMouseOver="swapImg(this, 'img03.jpg')" 
     onMouseOut="swapImg(this, 'img04.jpg')" />
  </a>
</body>

另外，它是"边界"而不是"边界"。

您的javascript中只需要一个函数。

试试看：

HTML

<a href="test.html">
<img src="startidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'starthover.png')" 
onMouseOut="MouseOut(this, 'startidle.png')" /></a>
<a href="test.html">
<img src="infoidle.png" boarder="0px"
onMouseOver="MouseRollover(this, 'infohover.png')" 
onMouseOut="MouseOut(this, 'infoidle.png')" /></a>

JAVASCRIPT

function MouseRollover(obj, image) {
     obj.src = image;
}
function MouseOut(obj, image) {
    obj.src = image;
}

编辑：您只能使用一个功能

function changeImage(obj, image){
    obj.src = image;
}
相关文章：