javascript - onmouseover イベントで複数の画像を表示する

Question

onmouseover で画像を表示し、onmouseout でデフォルトの画像をアクティブに戻す次のコードがあります。

<img src="image1.jpg" onmouseover="this.src='image2.jp'" onmouseout="this.src='image1.jpg'" />

onmouseover複数の画像イベントを表示できるようにしたい。一定時間ごとに表示されます。誰でもこれについて私を助けることができますか?

Answer 1

HTML

<div id="container">
   <img id="initialIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" />
</div>

<img src="http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" onmouseover="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png'" onmouseout="this.src='http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png'" />

JavaScript

$(document).ready(function(){
    $("#container").mouseenter(function() {  
        var t = setTimeout(function(){ 
           $("#initialIMG").hide();

           $("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/longhaul-icon.png" )
           $("#initialIMG").fadeIn(50);
           $("#container").append( '<img id="addedIMG" src="http://icons.iconarchive.com/icons/jamespeng/construction/128/mixmaster-icon.png" style="display:none;"/>' );      
           $("#addedIMG").fadeIn(50);  
        },500);
    });
    $("#container").mouseleave(function() {
          var t = setTimeout(function(){ 
              $("#initialIMG").hide();                      
              $("#initialIMG").attr("src", "http://icons.iconarchive.com/icons/jamespeng/construction/128/bonecrusher-icon.png" )
              $("#initialIMG").fadeIn(50);   
              $("#addedIMG").remove();
              },500);
    });
});

フィドル

Answer 2

最も美しいものではないかもしれませんが、うまくいきます。

HTML:

<img id="image1" src="image1.jpg" onmouseover="showImages()" onmouseout="hideImages()" />
<img id="image2" src="image2.jpg" style="display:none;" />
<img id="image3" src="image3.jpg" style="display:none;" />

Javascript:

function showImages(){
  document.getElementById('image2').style = '';
  document.getElementById('image3').style = '';
}
function hideImages(){
  document.getElementById('image2').style = 'display: none;';
  document.getElementById('image3').style = 'display: none;';
}

もちろん、これをクラスで解決して、コードをクリーンアップする必要があります。これは機能する基本的な例です。

Answer 3

これを試して：

function showImage() {
    //Your code here
}

function hideImage() {
    //Your code here
}

<img src="image1.jpg" onmouseover="showImage();" onmouseout="hideImage();" />

Answer 4

jQuery を使用したくない特定の理由はありますか?

CSSで：

#my-pics .default{
    display: inline;
}

htmlで：

<div id="my-pics">
    <img src="image1.jpg" class="default" />
    <img src="image2.jpg" style="display:none;" />
    <img src="image3.jpg" style="display:none;" />
</div>

jsで：

$("#my-pics").mouseenter(function(){
    $(this).find(".default").hide();
    $(this).find(":not(.default)").show();
}).mouseleave(function(){
    $(this).find(".default").show();
    $(this).find(":not(.default)").hide();
});

もちろん、最初に jquery をインポートする必要があります。これを自分でテストしていませんが、エラーはありますか?

CSSソリューション？

htmlで：

<div id="my-pics">
    <img src="image1.jpg" class="default" />
    <img src="image2.jpg"/>
    <img src="image3.jpg"/>
</div>

CSSで：

#my-pics img{
    display: none;
}
#my-pics img.default{
    display: inline;
}
#my-pics:hover img{
    display: inline;
}
#my-pics:hover img.default{
    display: none;
}