4

マウスオーバーで変化する画像を作ろうとしていました。このコードは IE では機能しますが、chrome、opera、safari などの他のブラウザーでは機能しません。何かアイデアはありますか?

<a href="#" onmouseover="document.myimage1.src='img/login_button_22.jpg';"
onmouseout="document.myimage1.src='img/login_button_11.jpg';">    
<img src="img/login_button_11.jpg" name="myimage1" /> </a>
4

3 に答える 3

7

NAMEではなくIDを使用し、を使用document.getElementByIdして要素を選択する必要があります。

FORM要素ではないIMG要素は、NAMEプロパティを取得できないはずですが、Microsoftはこれを台無しにすることができました。

<a href="#" onmouseover="document.getElementById('myimage1').src='img/login_button_22.jpg';"
onmouseout="document.getElementById('myimage1').src='img/login_button_11.jpg';">    
<img src="img/login_button_11.jpg" id="myimage1" /></a>

また、CSSの背景と:hover宣言を使用し、JavaScriptを使用してこれを完全にスキップする方がはるかに簡単でクリーンです。

方法は次のとおりです。

HTML：

<a class="mybutton" href="#"></a>

CSS（それに応じて寸法を調整します）：

.myButton {
     width:100px;
     height:50px;
     display:block;
     background-image:url(../img/login_button_11.jpg);

}

.myButton:hover {
     background-image:url(../img/login_button_22.jpg)
}
于 2012-11-27T15:25:40.770 に答える
1

これを試して：

<img src='img/login_button_11.jpg' onmouseover="this.src='img/login_button_22.jpg';" onmouseout="this.src='img/login_button_11.jpg';" />
于 2014-07-14T20:57:42.377 に答える
1 
<a href="" onMouseOver="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/ask-icon.png';" onMouseOut="document.MyImage.src='http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png';">
<img src="http://icons.iconarchive.com/icons/uiconstock/round-edge-social/72/arto-icon.png" name="MyImage">

デモ http://jsfiddle.net/W6zs5/

于 2014-06-27T01:46:49.167 に答える