矢印付きのリンク

戻る♪

作成日:2000/06/21

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

■ソース

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

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

■例

リンク1 リンク2


■使用例

以下は本サイトの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>
本サイトの表紙の場合、画像Aを矢印の画像、画像Bと画像Cは何も描いてない透過GIFになっています。


■応用

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


■注意

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

[ライン : 8] 'images' はオブジェクトではありません。