Home > イヌでもわかるJavaScript講座 お品書き
イヌでもわかるJavaScript講座 お品書き へ戻ります
イヌでもわかるJavaScript講座


Step.67 - リンクにカーソルが触れるとリンクアイコンを変化させる(複数編)


複数あるリンクの上にマウスカーソルを持っていくとリンクアイコンを変えます。


Step テーマ
● Image.src (キャッシュ取り込み)

実行例


Tatsuya's Home Page
イヌでもわかるJavaScript講座
ネコでも知ってるInternet講座
JavaScript リファレンス


リスト


<script type="text/javascript"><!--
myGifTbl = new Array(// ボタン画像テーブルを作成
"js_sdg.gif",// [0] 緑のボタン(暗)
"js_sg.gif",// [1] 緑のボタン(明)
"js_sdo.gif",// [2] 橙のボタン(暗)
"js_so.gif"// [3] 橙のボタン(明)
);
mySrcTbl = new Array( myGifTbl.length );// 画像データをキャッシュに取り込むテーブル定義
for (i=0; i<myGifTbl.length; i++){// 画像データ数分ループする
    mySrcTbl[i] = new Image();// 画像バッファ生成
    mySrcTbl[i].src = myGifTbl[i];// キャッシュに画像データを取り込む
}
function myChange( myTblNo, myName ){// 画像変更関数
    document.images[myName].src = mySrcTbl[myTblNo].src;
}
// --></script>
<A href="http://www.red.oit-net.jp/tatsuya/" onmouseover="myChange( 1, 'btn0' );" onmouseout="myChange( 0, 'btn0' );">
<IMG src="js_sdg.gif" name="btn0"> Tatsuya's Home Page</A><BR>

<A href="http://www.red.oit-net.jp/tatsuya/java/" onmouseover="myChange( 3, 'btn1' );" onmouseout="myChange( 2, 'btn1' );">
<IMG src="js_sdo.gif" name="btn1"> イヌでもわかるJavaScript講座</A><BR>

<A href="http://www.red.oit-net.jp/tatsuya/internet/" onmouseover="myChange( 1, 'btn2' );" onmouseout="myChange( 0, 'btn2' );">
<IMG src="js_sdg.gif" name="btn2"> ネコでも知ってるInternet講座</A><BR>

<A href="http://www.red.oit-net.jp/tatsuya/js/" onmouseover="myChange( 3, 'btn3' );" onmouseout="myChange( 2, 'btn3' );">
<IMG src="js_sdo.gif" name="btn3"> JavaScript リファレンス</A><BR>


サンプルだけの HTMLは こちらへ

使い方


● マウスカーソルが乗った、離れたときのアイコン(URL) を myGifTbl にセットします。
myGifTbl = new Array(// ボタン画像テーブルを作成
"js_sdg.gif",// [0] 緑のボタン(暗)
"js_sg.gif",// [1] 緑のボタン(明)
"js_sdo.gif",// [2] 橙のボタン(暗)
"js_so.gif"// [3] 橙のボタン(明)
);
特に順番は気にしなくて結構です。
最後だけ、カンマはいりません。

● リンクを設置します。
<A href="http://www.red.oit-net.jp/tatsuya/" onmouseover="myChange( 1, 'btn0' );" onmouseout="myChange( 0, 'btn0' );">
<IMG src="js_sdg.gif" name="btn0"> Tatsuya's Home Page</A><BR>
IMGタグのNAME属性に、任意の名前を付けます。( 上のサンプルでは "btn0" )

myChange のパラメータをセットします。
myChange( 変更するアイコン(myGifTbl)の行番号, Aタグで囲ったIMGタグのNAME )
※ 行番号は ゼロから数えます。
※ IMGタグのNAME は、シングルクォーテーションで囲って指定します。
onmouseover はマウスカーソルが乗った時、onmouseout はマウスカーソルが離れたときです。
(上のサンプルでは、onmouseover 時は 緑のボタン(明)アイコン、onmouseout 時は 緑のボタン(暗)アイコン へ変更するように設定しています）


説明


マウスカーソルがリンクやアイコンに触れると、その画像を変更します。
ルーチンは、Step.33 の応用編で ページに複数のアイコンボタンを設置するパターンです。

myGifTbl テーブルにアイコンのURLを設定して、あらかじめキャッシュに読み込んでおきます。
myGifTbl = new Array(// ボタン画像テーブルを作成
"js_sdg.gif",// [0] 緑のボタン(暗)
"js_sg.gif",// [1] 緑のボタン(明)
"js_sdo.gif",// [2] 橙のボタン(暗)
"js_so.gif"// [3] 橙のボタン(明)
);
mySrcTbl = new Array( myGifTbl.length );// 画像データをキャッシュに取り込むテーブル定義
for (i=0; i<myGifTbl.length; i++){// 画像データ数分ループする
    mySrcTbl[i] = new Image();// 画像バッファ生成
    mySrcTbl[i].src = myGifTbl[i];// キャッシュに画像データを取り込む
}

onmouseover、onmouseout 時に アイコンを変える myChange() を作りました。
第1パラメータに 変更する myGifTbl の配列番号
第2パラメータに IMGタグのNAME
を指定します。
onmouseover="myChange( 1, 'btn0' );"
onmouseout="myChange( 0, 'btn0' );"
myChange() の中身は
function myChange( myTblNo, myName ){// 画像変更関数
    document.images[myName].src = mySrcTbl[myTblNo].src;
}
指定された IMGタグの画像を キャッシュに取り込んだ画像に 変更しているだけです。


サンプルの画像
js_sdg.gif js_sg.gif js_sdo.gif js_so.gif
画像データは、ｍｏｔｏさんからお借りしました。Thanks.
moto's 素材工房 http://www.netpro.ne.jp/~moto/


参考ステップ
Step.33 マウスカーソルが触れたら画像を変えてみましょう　
Step.98 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょう その２
Step.99 マウスカーソルが触れたら画像を変えてみましょう その3
Step.100 サムネイル画像にカーソルを合わせて拡大画像を表示してみましょう その3
▲TOP


 
イヌでもわかるJavaScript講座 お品書き へ戻ります
▲TOP