開かれているメニューページのリンクアイコン画像を変更して、
どのページが開かれているのかわかるようにするスクリプトです。
これは全てのリンクに、同じ画像を使用している場合に適しています。
フレーム専用です。
下のサンプルをクリックしますと、新しいウィンドゥが開いて動作を確認できます。
サンプルではアイコン画像が変化するのを確認出来ます。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript" type="text/javascript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
my_links=new Image();
my_links2=new Image();
//通常時の画像を指定する
my_links.src="link.gif";
//クリックされた時の画像を指定する
my_links2.src="link2.gif";
moto=-1;
function kawaru(dore)
{
if(moto !=- 1)document.images["pic"+moto].src=my_links.src;
else document.images["pic"+dore].src=my_links2.src;
moto=dore;
}
//-->
</script>
</head>
<body>
<a href="../../index.html" target="myframe2" onClick="kawaru(0);"><img src="link.gif" name="pic0" border=0>JavaScript</a>
<a href="../../lib_form.html" target="myframe2" onClick="kawaru(1);"><img src="link.gif" name="pic1" border=0>サンプル集（フォーム）</a>
<a href="../../lib_link.html" target="myframe2" onClick="kawaru(2);"><img src="link.gif" name="pic2" border=0>サンプル集（リンク）</a>
</body>
</html>
[ 解説 ]
まず、使用する画像のURLを指定します。
上から7行目と9行目をご覧下さい。
7行目に「link.gif」、9行目に「link2.gif」とあります。
ここに使用したい画像URLを指定します。
7行目に最初から表示されている画像URL、9行目に選択された時に表示させたい画像URLをお書き下さい。
次にリンクを変更します。
この部分は普通のリンクの変更方法と同じです。
URL、ターゲット名、項目名、画像のURL、サイズ指定などはお好きなようにご変更下さい。
ただしリンクにくっついてる見慣れない部分は、そのままにしておいて下さいね。
続いて、もし項目をもっと増やしたい場合は、下から4行目の
<a href="../../index.html#JavaScript" target="myframe2" onClick="kawaru(2);">
<img src="link.gif" name="pic2" border=0>JavaScript</a>
をコピーペーストして増やして下さい。
URLや項目名はお好きなようにご変更下さい。
で、赤字の「2」の部分が2カ所有りますが、ここを1つ繰り上げて「3」にします。
もっとリンクを増やして行くなら、同じようにコピーペーストして、
どんどん数字部分を繰り上げていって下さい。
|
