javascriptでonmouseoverを使って画像を表示するには

Question

私はたくさんのペットを持っています。私が手に入れたいのは、私が立ち上がるとき、近くのdivに特定のペットのイメージが表示されるということです。

は、例えば

<code> 
<select name="pet" id="pet"> 
<option value="1">Dog</option> 
<option value="2">Cat</option> 
<option value="3">Rat</option> 
</select> 

<div id="petimage"></div> 
</code> 

以前の私はAJAXの助けを借りて、その後オプションでonmousehover使用していた私は、特定のペットの画像を取得するためにALBEだったが、今私はIEで動作しないonmousehoverイベントを実現しました。

誰も私に代わりを教えてもらえますか？

おかげ ナビ

Answer 1

あなたのオプションに画像を追加hover()

Answer 2

を使用する方がよいでしょう。

<option value="1" data-img="dog.jpg">Dog</option> 

そして、このコードを使用します。

$('#petimage').hover(function(){ 

    $(this).html('<img src="'+$('#pet option:selected').data('img')+'">'); 

},function(){ 

    $(this).html(''); 

}); 

Answer 3

することができますこれを試して？

 



    <select name="pet" id="pet" onchange="document.getElementById('getdisplay').src=this.value"> 
<option value="dog.jpg">Dog</option> 
<option value="cat.jpg">Cat</option> 
<option value="rat.jpg">Rat</option> 
</select> 

<div id="petimage"><img src="" id="getdisplay" /></div> 

 

用画像タグと、選択した要素の上にカーソルを移動したいgetdisplay