-2

State 1 over State 1 out State 2 over State 2 out の 4 つの異なる状態を持つ img を作成したいと考えています。

各状態は異なる画像であり、ユーザーは画像をクリックして状態 1 と 2 を切り替えることができます。これを行うには、画像がクリックされたときに src を変更し、img 要素の onmouseover および onmouseout 属性を変更します。ただし、属性が変更されると、それらは null になり、何もしません。これらのプロパティを動的に変更するにはどうすればよいですか?

私が使用しているコードは次のとおりです。

<!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

トグル統計を保存するには、2 つの変数を使用する必要があります。

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 に答える