×

[PR]この広告は3ヶ月以上更新がないため表示されています。
ホームページを更新後24時間以内に表示されなくなります。

JavaScript:マウスオーバー(画像) JavaScript web design

マウスオーバー(画像)

 サンプルプレビュー
JavaScript:マウスオーバーで画像を変える
 コード
JavaScript部分
var img = new Array()
img[0]=new Image();img[0].src="images/e-00.gif";
img[1]=new Image();img[1].src="images/e-01.gif";
img[2]=new Image();img[2].src="images/e-02.gif";

function s(x){
 y="Z"+x;
 document.images[y].src=eval("img["+x+"].src");
}
function u(x){
 y="Z"+x;
 document.images[y].src="images/e-1"+x+".gif";
}
html部分

<div class="j1">
 <a href="#" onMouseOver="s('0')" onMouseOut="u('0')">
  <img src="images/e-10.gif" id="Z0" class="img">
 </a>
</div>
<div class="j1">
 <a href="#" onMouseOver="s('1')" onMouseOut="u('1')">
  <img src="images/e-11.gif" id="Z1" class="img">
 </a>
</div>
<div class="j1">
 <a href="#" onMouseOver="s('2')" onMouseOut="u('2')">
  <img src="images/e-12.gif" id="Z2" class="img">
 </a>
</div>

※JavaScript部分:変更する画像を先に読み込む(配列に画像を収納)
※コードでimgタグのwidth,height,altを、aタグでtitleを省略しております

※NN4、IE4.5(Mac)以前のブラウザに対応しておりません。(ウィンドウズのIE5/IE5.5/IE6だけででシェア95%と言われいる為です)

※記述は独自で制作したものであり、正規な記述方法では無い場合があります。また間違っている所やもっと良い方法等ありましたらご連絡下さい。
|   Link  |   Profile  |   Sitemap  |