2016-07-17 11 views
0

私はJavaScriptでホバー上の画像srcを変更したいのですが、ここではここでねじれ ですが、私のHTMLでJavascriptでホバー上の入力タイプタグを変更する(イメージソース)

<div class="foo"> 
<div class="foo-2"> 
    <form> 
    <input type="image" src="I want to change this on hover"> 
    </form> 
    </div> 
</div> 

私はここにこの質問CSS: Change image src on img:hover

のansewrが答えの引用です見直し: 「 そして、あなたはあなたがして、いくつかのJavaScriptコードを使用することができると思う場合は、以下のようにimgタグのSRCを変更することができるはず

function hover(element) { 
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff'); 
} 
function unhover(element) { 
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff'); 
} 

とhtmlは

img id="my-img" src="http://dummyimage.com/100x100/000/fff"   onmouseover="hover(this);" onmouseout="unhover(this);" /> 

それは便利ですが、私はjavascritでそれを変更することができるように、私は本当に、私のコードタイプの画像をターゲットにトラブルを抱えていること。

+0

あなたは入力を見つけてその 'src'属性を変更しませんか? – gcampbell

答えて

1

私はホバー上のソースを変更することは素晴らしい考えではないと思います。どうして?画像をロードする必要があり、1.秒以内に何も起こらなければ、ユーザに負荷をかけ混乱させるために比較的長い時間がかかることがあります。

両方の画像をあらかじめロードしておき、cssを使用してホバー上の正しい画像を表示/非表示にすると良いでしょう。この方法で即座に表示されます。

関連する問題