実践！ホームページでこんな事がしたい


マウスを乗せると画像が変わるようにしたい
マウスカーソルを乗せる事で画像を変える事が出来ます。
ロールオーバー効果と言われています。
JavaScriptが使われています。

ブラウザ設定でJavaScriptがoffの場合は無効になります。
CPUにも負担が掛かるので使いすぎは禁物です。
簡易指定とブラウザに先読みさせる方法があります。
ちょっと初心者には敷居が高い感じです。
一応…両方説明しますが、わかりづらい場合は簡易版をお勧めします。

HOME BACK

マウスを乗せると画像が変わるようにしたい
簡易版
<A HREF="#" onmouseover="document.neko1.src='ファイル名'" onmouseout="document.neko1.src='ファイル名'">
<IMG SRC="ファイル名" HEIGHT="76" WIDTH="65" BORDER="0" name="neko1">
</A>

<A HREF="リンク先を指定します。未指定の場合は#を挿入。"
onmouseover="document.任意の名前（英数字で付けます）.
Src='マウスを乗せた時の画像ファイル名を指定します'"
onmouseout="document.任意の名前（上と同じです）.
Src='マウスが外れた時の画像ファイル名を指定します'">
<IMG SRC="通常時の画像ファイル名" HEIGHT="画像の高さ" WIDTH="画像の幅" BORDER="画像の枠線の太さ(0は非表示)" name="任意の名前（同じです）">
こんな感じで設定します。

ブラウザに先読みさせる方法もあります。
ちょこちょこっと作ってみましたが…自信がないので、きちんと覚えたい人は違うサイトを参考にしてみてくださいね^^;)
私も勉強中なので…。
先読み版
まず<HEAD></HEAD>の間に下のタグを挿入します。
<SCRIPT language="JavaScript">
<!--

var img_number=0;
var img_name='';
var aa=0;

var cnt=1; //画像切り替えを使う数を選択します。ロールオーバーを三カ所使いたいなら３になります。

var i_ovr= new Array();
var i_out= new Array();

for( aa = 0 ; aa < cnt ; aa++ ){
i_ovr[aa] = new Image();
i_out[aa] = new Image();
}

i_ovr[0].src ='cat-51b.gif'; //マウスを乗せた時の画像を指定。var cntを複数している場合は下に追加していきますi_ovr[1].src=…
i_out[0].src ='cat-51a.gif'; //マウスが外れた時の画像を指定。上と同じ感じで追加。

function img_over (img_name,img_number){
document.images[img_name].src=i_ovr[img_number].src;
}

function img_out (img_name,img_number){
document.images[img_name].src=i_out[img_number].src;
}

//-->
</SCRIPT>

後は表示させたい部分に下のタグを貼り付けます。
<A HREF="#" onmouseover="img_over('neko',0)" onmouseout="img_out('neko',0)"><IMG src="cat-51a.gif" HEIGHT="76" WIDTH="65" BORDER="0" name="neko">
</A>
　　　
簡単な説明です。
<A HREF="リンク先を指定。未指定の場合は#を挿入"
onmouseover="img_over('任意の名前（英数字でつけます',0)"0は複数の画像設定をしている時に変更します。上のタグ表示で色分けしている部分です。
onmouseout="img_out('neko',0)">
<IMG src="画像ファイル名" HEIGHT="画像の高さ" WIDTH="画像の幅" BORDER="画像の枠の太さ（0は非表示）" name="任意の名前"となります。
簡易版の応用でこんな事も出来ます。
クロちゃん　シャムちゃん
元画像を普通に貼り付けます。
<IMG SRC="cat-kao-03.gif" WIDTH="49" HEIGHT="38" BORDER="0" name="neko3">
違うのは最後にname="任意の名前"を入れる事だけです。
次に
<A HREF="#" onmouseover="document.neko3.src='cat-kao-01.gif'" onmouseout="document.neko3.src='cat-kao-03.gif'">クロちゃん</A>
<A HREF="#" onmouseover="document.neko3.src='cat-kao-02.gif'" onmouseout="document.neko3.src='cat-kao-03.gif'">シャムちゃん</A>で完成となります。
HOME BACK
パソコン初心者講座ぱそおーる