オンマウス画像切替え

マウスを当てると画像が変わる（オンマウス画像切替え）

これは実は私が何年か前に初めてホームページを作った時にＪａｖａＳｃｒｉｐｔを勉強して初めて使ってみた画像の切替え方法です。画像は項目名にマウスを当てるだけで切替えることが出来ます。それと同時に、項目名をクリックするとこの画像に関連したページを開くことが出来るものです。
私自身はこれをフレームを使ってやりましたので、ここでご紹介するのはその時に使ったスクリプトとは少し違います。
しかし基本的なところは同じですのでご参考になればと思いご紹介します。

サンプル

下の各項目にマウスを当てると画像が変わります。更に項目名をクリックすると関連するページが開きます。

いたいのいたいのとんでけー

 ごはんたべていって

 うんどうかい

 ゆめにっき

 おにいちゃんのそばがいいな

スクリプトの例を下に示します。

下記スクリプトを<HEAD></HEAD>間に挿入します。

<SCRIPT> function changeimage(towhat,url){ if (document.images){ document.images.targetimage.src=towhat.src gotolink=url } } function warp(){ window.location=gotolink } </SCRIPT> <SCRIPT language="JavaScript1.1"> var myimages=new Array() var gotolink="#" function preloadimages(){ for (i=0;i<preloadimages.arguments.length;i++){ myimages[i]=new Image() myimages[i].src=preloadimages.arguments[i] } } preloadimages("2002-04-18.jpg","2002-04-29.jpg","2002-04-19.jpg","kodomo.jpg","futari.jpg") </SCRIPT>

このうち自分で変える部分はpreloadimages("2002-04-18.jpg","2002-04-29.jpg","2002-04-19.jpg","kodomo.jpg","futari.jpg")
の（　）で囲まれた部分をご自分の画像名に書き換えます。

次に下記スクリプトを<BODY></BODY>間に挿入します。

<A href="javascript:warp()"><IMG src="2002-04-18.jpg" name="targetimage" border="0" align="right" style="text-align : center;margin-right : 150px;"></A> <P><BR> <A href="itaino.htm" onmouseover="changeimage(myimages[0],this.href)">いたいのいたいのとんでけー</A><BR> <BR> <A href="tabete.htm" onmouseover="changeimage(myimages[1],this.href)">ごはんたべていって</A><BR> <BR> <A href="undoukai.htm" onmouseover="changeimage(myimages[2],this.href)">うんどうかい</A><BR> <BR> <A href="yume.htm" onmouseover="changeimage(myimages[3],this.href)">ゆめにっき</A><BR> <BR> <A href="futari.htm" onmouseover="changeimage(myimages[4],this.href)">おにいちゃんのそばがいいな</A></P>

ここではリンクするページのファイル名とその項目名を自分のものに書き換えます。
また、ページを開いた時に最初に表示する画像のファイル名を一番上のＩＭＧ src= のところで指定します。

変更する部分は以上で終わりです。

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送