JavaScript 画像データを入れ替える
画像を入れ替えるには、Imageオブジェクトのsrcプロパティに画像のURLを指定します。その際、入れ替える画像データが読み込まれていないと、瞬時に切り替わりません。低速な回線の場合は、次のようにあらかじめ、画像を読み込んでおく方法もあります。
( new Image() ).src = "画像のURL";なお、ロールオーバーによる単純な画像の入れ替えであれば、JavaScriptを利用するよりもCSSを使って入れ替える方がよい場合もあります。
<body>
<script>
window.addEventListener("load" , function(){
//img要素にアクセスするために参照を変数に代入
var myImage = document.getElementsByTagName("img")[0];
//mouseoverイベントを割り当てる
myImage.addEventListener("mouseover", function(){
this.src = "images/keyvisual.jpg";
},false);
//mouseoutイベントを割り当てる
myImage.addEventListener("mouseout", function(){
this.src = "images/629959_s.jpg";
},false);
}, false);
</script>
<div>
<img src="./images/629959_s.jpg">
</div>
</body>画像上にマウスを乗せると画像が入れ替わります。Androidの場合は、タッチすると画像が入れ替わります。
マウスを画像から離すと、元の画像に戻ります
CSSでロールオーバーを行うには
CSSでロールオーバーを行うには、「:hover疑似クラス」を利用します。次の場合、HTMLで「<div id=”myImage”></div>」となっている背景画像を入れ替えるには、「background-position」を使って表示する画像の位置を変化させることでロールオーバーを実現することができます。
#myImage{
width: 160px;
height: 120px;
background-image: url(images/myphoto1.jpg);
}
#myImage:hover{
background-iamge: url(images/myphoto2.jpg);
}