Java Script サンプル
画像のすり替え



マウスで、ポイントするとリンク左の ボタン画像が、すり替わります。 このサンプルを使うには、2つの画像が必要です。 ここでは、blue.gifと red.gifの2つの画像を使用しています。 これをマウスのポイントによって、入れ替えるプログラムです。

実行例

リンク1
リンク2
リンク3
リンク4
リンク5

ソースコード(HEAD内)

  <Script Language="JavaScript">
  <!-- 
    preimg= new Image();
    preimg.src="red.gif"; //すりかえる画像

    function changeImg(n){
       document.images[n].src=preimg.src;
      }

    function defImg(n){
       document.images[n].src="blue.gif"; //もとの画像
      }
  //-->
  </Script>

ソースコード(BODY内の画像＆リンクタグ)

<a href="[URL]" 
 onMouseOver="changeImg(0)" onMouseOut="defImg(0)">
   <img src="blue.gif" hspace=7 border=0>リンク1</a>

<a href="[URL]" 
 onMouseOver="changeImg(1)" onMouseOut="defImg(1)">
   <img src="blue.gif" hspace=7 border=0>リンク2</a>

<a href="[URL]"
 onMouseOver="changeImg(2)" onMouseOut="defImg(2)">
   <img src="blue.gif" hspace=7 border=0>リンク3</a>
・
・
・




使用方法
このプログラムを使うためには、 同じ大きさの2つの画像が必要です。 ここでは と、 の画像を使っています。 もし、画像がない人はこの画像を使ってください。 この２つを HTMLのあるのと同じフォルダーに 入れてください。

あとは、上のコードをコピーして 貼り付けるだけですが、 一つだけ注意する点は、 リンクタグ内の赤で書かれた 数字に注意してください。 これらは、画像の順番を表しています。 上から、ページ内の「すべての」画像を含め、 問題のすりかえたい画像が何番目にあるか 数えてください。 ０から数えるので もし、すり代えたい画像がHTML内の画像のうち 一番目の画像だった場合その数字は、０になります。 すり代えたい画像が、HTML内の上から5番目の画像だったら 数字は、0から数えるので４になります。

back to index