attr(“src”).replace(~)を使ってマウスオーバー時の画像切替を実装する方法をご紹介します。
切替前と切替後の2パターンの画像を用意し、画像のファイル名を変更するだけなので簡単です。
Contents
ディスプレイ広告
マウスオーバー時の画像切替を実装するCSSの記述
※必要に応じて変更して下さい。
<style type="text/css">
<!--
body{
margin:0;
padding:0;
}
h1{
font-size:16px;
font-weight:normal;
line-height:1.6em;
text-align:center;
padding:15px 0;
}
#idWrap{
width:600px;
margin:0 auto;
text-align:left;
}
-->
</style>
attr().replace()を使ってマウスオーバー時にマウスオーバーした画像の切替を実装するJavaScriptの記述
※jquery.min.jsファイルを読み込みます。切替前(btn_off.jpg)と切替後(btn_on.jpg)の2パターンの画像を用意し、ページ内のimgタグに対してマウスオーバー(hover)時に画像ファイル名にある文字列「_off」を「_ov」に変更するだけです。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var images = $("img");
for(var i=0; i < images.size(); i++) {
if(images.eq(i).attr("src").match("_off.")) {
$("img").eq(i).hover(function() {
$(this).attr('src', $(this).attr("src").replace("_off.", "_ov."));
}, function() {
$(this).attr('src', $(this).attr("src").replace("_ov.", "_off."));
});
}
}
});
</script>
マウスオーバー時の画像切替を実装するHTMLの記述
※切替前(btn_off.jpg)のimgタグを用意してます。必要に応じて変更して下さい。
<div id="idWrap">
<h1>ページ内の画像をマウスオーバーするとファイル名「~_off.~」の画像を<br />「~_ov.~」の画像に変更して表示します。</h1>
<div align="center"><img src="btn_off.jpg" width="300" height="120" alt="" border="0" /></div>
<br />
<br />
<div align="center"><img src="btn_off.jpg" width="300" height="120" alt="" border="0" /></div>
</div>
attr.replace:ページ内の画像をマウスオーバーで切替え表示するデモページ
attr.replace:ページ内の画像をマウスオーバーで切替え表示するデモページ
ボタン画像毎に2種類用意する必要があるので、切替画像が多いページは画像を用意するのが少し面倒かもしれません。
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。