ポイントされると絵が変わるスクリプトです。
JavaScript目次ページで使用しているものです。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp
link1=new Image();
link2=new Image();
//マウスオーバーした時の画像を指定する
link1.src="0.gif";
//マウスアウトした時の画像を指定する
link2.src="1.gif";
function mouse_in(dotti)
{document.images[dotti].src=link1.src;}
function mouse_out(dotti)
{document.images[dotti].src=link2.src;}
//-->
</script>
</head>
<body>
<a href="../../index.html" onMouseOver="mouse_in('link1');" onMouseOut="mouse_out('link1');">
<img border="0" src="1.gif" name="link1" align="bottom">JavaScriptLibray</a>
</body></html>
[ 解説 ]
まず「link2.gif」とある部分へ、
マウスポイントされた時に表示させたい画像ファイル名を書きます。
その下にある「link.gif」に普段表示させておく画像ファイル名を書きます。
後はリンク部分を用意するだけですが、ここで注意を。
まず一つのリンクは
<a href="../../index.html" onMouseOver="mouse_in('link1');" onMouseOut="mouse_out('link1');">
<img border="0" src="../link.gif" name="link1" align="bottom">JavaScriptLibray</a>
からなっています。
「../../index.html#JavaScript」の部分にお好きなURLを、
「link.gif」にはマウスポイントされていない時に表示させる画像名を、
「JavaScriptLibray」にはリンク名として表示させたい文字を書いて下さい。
右にあったサンプルのように画像をボタンとして使用する場合は、
１５行目の「JavaScriptLibray」は何も書かなくてＯＫです。
この辺りは、ごく普通のリンクの貼り方と同じですね。
一つのページ内に、すり替えアンカーを一つだけ設置するならこれで何も問題はないのですが、
たぶんほとんどの方が一つのページ内にすり替えアンカーを複数設置されると思いますので、
ここから先をよく読んで下さい。
（例えばJavaScriptの目次ページでは、各項目ごとに画像すり替えがくっついていますよね。
あのように1つのページ内にリンクを複数設置し、複数のアンカーで画像すり替えを行いたい場合の事です。）
リンクタグ内に「link1」と書かれている部分が三カ所あります。
画像すり替えハイパーリンクを増やす度に、この「link1」の「1」の部分を変更して下さい。
数字を一つずつ増やしていくのです。
例えば上のサンプルで一つリンクを増やすとすると、
<a href="../../index.html#JavaScript" onMouseOver="mouse_in('link1');" onMouseOut="mouse_out('link1');">
<img border="0" src="link.gif" alt="linkpic(906バイト)" name="link1" align="bottom">
jScriptLibray</a>
<a href="kiso_basis.html" onMouseOver="mouse_in('link2');" onMouseOut="mouse_out('link2');">
<img border="0" src="link.gif" alt="linkpic(906バイト)" name="link2" align="bottom">
jScript基礎</a>
と、なります。
これを必ず忘れないで下さい。一つのリンクにつき、名前変更箇所が３つあります。
３つともキチンと変更して下さい。
|
