画像切替
この例は、マウスの移動でその場所の画像を切り替えるものです
ソースとしては、以下の通りです
<![CDATA[
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML勉強会テキスト</TITLE>
<SCRIPT language="javascript">
<!--
var img1 = new Image();
var img2 = new Image();
img1.src = "pac1.img";
img2.src = "pac2.img";
function mouseoveraction() {
document.images["targetimages"].src="pac2.gif";
}
function mouseoutaction() {
document.images["targetimages"].src="pac1.gif";
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080">
<A href="javascript:void(0)" onMouseover="mouseoveraction()" onMouseout="mouseoutaction()">
<IMG border="0" src="pac1.gif" width="50" height="50" name="targetimages">
</A>
<BR><BR>画像の上にマウスポインタを移動したり、外したりしてみて下さい<BR>
</BODY>
</HTML>
]]>
function mouseoveraction()は、マウスポインタが画像の上に来た場合、その画像を切り替えます
function mouseoutaction()は、マウスポインタが画像の上から外れた場合、元にの画像に戻します
それぞれは、<IMG>タグでつけた名前：targetimagesを指示し、そのsrcを切り替えています
<A>タグは、一見なにもしていない様に見えますが、この処理の仕組み上、重要な役目をしています
onMouseoverで、画像の上にマウスポインタが移動した処理、onMouseoutで画像からマウスポインタが外れた処理をそれぞれ起動しています
なお、hrefで指定しているjavascript:void(0)は、なにもしないのと同じ意味を持ちます
最初にある、varの部分は、画像を先に読み込んでおくための処置です
これがないと、初回のみですが、マウスポインタが移動した時、画像の読み込みが発生し、レスポンスが悪くなります
ここをクリックすると、この画面の実行結果が見れます