-2

我想创建一个具有四种不同状态的 img：State 1 over State 1 out State 2 over State 2 out

每个状态都是不同的图像，用户可以通过单击图像在状态 1 和 2 之间切换。为此，我在单击图像时更改了 src 以及 img 元素的 onmouseover 和 onmouseout 属性。但是，当属性已更改时，它们将变为空且不执行任何操作。如何动态更改这些属性？

这是我正在使用的代码：

<!DOCTYPE html>
<html>
<head>
<script>
function change()
{ 
document.getElementById('image').src="http://youtube.thegoblin.net/layoutFix/hideplaylist.png";
document.getElementById('image').onmouseover="this.src='http://youtube.thegoblin.net/layoutFix/hideplaylistDark.png'";
document.getElementById('image').onmouseout="this.src='http://youtube.thegoblin.net/layoutFix/hideplaylist.png'";
}
</script>
</head>

<body>
<img id="image" src="http://youtube.thegoblin.net/layoutFix/showplaylist.png" onmouseover="this.src='http://youtube.thegoblin.net/layoutFix/showplaylistDark.png'" onmouseout="this.src='http://youtube.thegoblin.net/layoutFix/showplaylist.png'" onClick="change()">

</body>
</html>
4

2 回答 2

1

You need to use 2 variables to save toggle stat:

var img = document.getElementById("image");
var toggleover  = false;
var toogleClick = false;

img.addEventListener('click',function(){
    toogleClick = !toogleClick;
    changeImg();
},false);

img.addEventListener('mouseover',function(){
    toggleover = true;
    changeImg();
},false);
img.addEventListener('mouseout',function(){
    toggleover = false;
    changeImg();
},false);

(function changeImg(){
if(toogleClick)  
    img.src = toggleover ? "url-1-2.jpg" : "url-1-1.jpg";
else
    img.src = toggleover ? "url-2-2.jpg" : "url-2-1.jpg";
})();
于 2012-12-13T22:47:07.197 回答
0

如果我很好地理解了您的问题，您需要增加一个变量并检查它是奇数还是偶数，然后根据您的需要进行不同的处理。

于 2012-12-13T22:40:35.947 回答