Question

我在我的网站上使用图像链接创建了这个菜单，并希望在每个菜单对象上都有不同的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>

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

Answer 1

您的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;
}

Answer 2

你的第二个脚本会覆盖第一个脚本，这意味着每次你调用“MouseRollover”或“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>

另外，它是“边界”而不是“边界”。

Linkmenu w / MouseOver javascript

2 个答案: