レスポンシブ・ロールオーバー画像

Question

ブラウザの幅と高さに応じてロールオーバー・イメージを作成しようとしています。現在のコードは次のとおりです：

'<a href="google.com"><img src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" /></a>' 

Answer 1

一般的に、あなたはこのような何かを行うことができます。

<a href="google.com"><img id="myImage" src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" /></a> 
<script> 
    var w = window.innerWidth; 
    document.getElementById("myImage").width = w; 
</script> 

これは、ブラウザウィンドウの内側の幅にイメージの幅を調整します。高さで調整する場合は、代わりにwindow.innerHeightプロパティを使用します。あなたのイメージに関連して2つのうちの最小のものであなたのイメージを調整したい場合は、いくつかのロジックを書くことができます。

それとも、あなたはインラインそれをしたい場合：

<a href="google.com"><img src="http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg" onmouseover="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_zpsekucjvgf.gif'" onmouseout="this.src='http://i1146.photobucket.com/albums/o535/DanielleStateAuto/360_vid_033017_A_still_zpskfsuzshi.jpg'" width="window.innerWidth"/></a> 

も動作しますが、それに追加のロジックを追加することは難しいだろう。

Answer 2

非現代的な/純粋なCSSの現代的なより良い習慣です。これを達成するにはいくつかの方法があり、ここでは一つだ：

<a href="#"><div class="myimg"></div></a> 

---

.myimg { 
    width:80%; 
    height:200px; 
    background: url(https://s-media-cache-ak0.pinimg.com/736x/bc/4e/38/bc4e386f24997b6f8c4c1f8ce96a7cef.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 
.myimg:hover { 
    background: url(http://img00.deviantart.net/4ec1/i/2013/017/5/b/blue_eyed_huskey_by_ashleysmithphoto-d5rsvt2.jpg); 
    background-size: 100% 100%; 
    background-repeat: no-repeat; 
} 

Live Demo。明らかに上記のCSSプロパティを環境設定/プロジェクトに設定します。