矢印付きのリンク

戻る♪
作成日：2000/06/21

　リンクにカーソルが合わさると、画像が変わるというスクリプトです。
このサイトの表紙で使ってるヤツd(^-^)ネ！

■ソース

HEAD内のソース
<SCRIPT language="JavaScript">
<!--
function YAZIRUSI(num,name)
{
document.images[num-1].src = name;
}
// -->
</SCRIPT>
BODY内のソース
<A HREF="ＵＲＬ" onMouseOver="YAZIRUSI(1,'画像Ａ')" onMouseOut="YAZIRUSI(1,'画像Ｂ')">
<IMG src="画像Ｃ" border=0>リンク１</A>

<A HREF="ＵＲＬ" onMouseOver="YAZIRUSI(2,'画像Ａ')" onMouseOut="YAZIRUSI(2,'画像Ｂ')">
<IMG src="画像Ｃ" border=0>リンク２</A>
補足
画像Ａ＝カーソルが合った時に表示する画像。
画像Ｂ＝カーソルが外れた時に表示する画像。
画像Ｃ＝最初に表示しておく画像。
※リンクを増やす場合、それに合わせて、画像Ａ・画像Ｂの前の数字も増やす事。

■例

リンク１ リンク２

■使用例

以下は本サイトのBODY内のソース。
<A HREF="oozappa.html" onMouseOver="YAZIRUSI(1,'img/on.gif')" onMouseOut="YAZIRUSI(1,'img/off.gif')">
<IMG src="img/off.gif" border=0>大雑把なタグの説明</A>


<A HREF="t_ichiran.html" onMouseOver="YAZIRUSI(2,'img/on.gif')" onMouseOut="YAZIRUSI(2,'img/off.gif')">
<IMG src="img/off.gif" border=0>タグ一覧・基本編</A>
本サイトの表紙の場合、画像Ａを矢印の画像、画像Ｂと画像Ｃは何も描いてない透過GIFになっています。

■応用

　リンク１とリンク２の画像は、別なものでも平気です。
（と言うより、全ての画像が異なっていても平気です。ただ、画像のサイズは、同じにした方が良いと思います。）
そのため、例えばリンクにテキストではなく、画像を使いたいという場合でも、各リンクの分の画像を用意すれば出来ます。

■注意

　IE3だと以下のエラーが出て、実行できない。
（画像は表示されないが、リンク先に飛ぶことは出来る）
Microsoft JScript runtime error

[ﾗｲﾝ : 8] 'images' はｵﾌﾞｼﾞｪｸﾄではありません。