0

我正在尝试调整以下代码，以便当我将鼠标悬停在现有图像上时，不仅该图像会更改，而且还会更改站点上不同位置的图像。

这就是我正在使用的（带有一些相应的javascript）......

<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../graphics/life2.jpg',1)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image1"/></a>
</figcaption>

所以，上面的代码说当悬停在“life2.jpg”上时要改变，将它改为“life1.jpg”......但我也想添加，这样悬停在“life2.jpg”上也会改变“life4.jpg” ”到“life3.jpg”。

非常感谢你！:)

C*

4

1 回答 1

0

使用以下所有操作调用 javascript：

<!DOCTYPE html>
<html>
<head>

<script>
function MM_swapImage(){ 
    document.getElementById("Image1").src = Image1.src.replace("http://bit.ly/12DYRi4", "http://bit.ly/T4xkFG");
    document.getElementById("Image2").src = Image2.src.replace("http://bit.ly/12DYRi4", "http://bit.ly/T4xkFG");   
}

function MM_swapImgRestore(){  
    document.getElementById("Image1").src = Image1.src.replace("http://bit.ly/T4xkFG", "http://bit.ly/12DYRi4");
    document.getElementById("Image2").src = Image2.src.replace("http://bit.ly/T4xkFG", "http://bit.ly/12DYRi4"); 
}
</script>

<head>  
<body>

<figcaption class="content">
       <a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage()">
           <img src="http://bit.ly/12DYRi4" width="50" height="50" id="Image1"/>
       </a>
       <br><br>
       <img src="http://bit.ly/12DYRi4" width="50" height="50" id="Image2"/>
</figcaption>

</body>
</html>

您可以在 jsfiddle 上看到它的实际效果：http: //jsfiddle.net/EW4ZZ/2/

这应该让你开始。

于 2012-12-21T11:58:16.430 回答