|
|
|
03/16(Sun) 02:13
 マウスがあたると新しいイメージを表示
下のイメージにマウスをあてて見て下さい。。(IE3.02では何も変化しません)
こちらでも変わります
こちらでも変わり、クリックで小ウィンドウオープン
 これも代わります
■スクリプトのコピー＆貼りつけ
下のスクリプトをコピーし、<HEAD>と</HEAD>のなかに貼りつけます。
- img1は最初に表示される画像です。
- img2はマウスがあたると新しく表示される画像です。
- img1とimg2は同じサイズである必要があります。
- 240,80は画像のサイズです。(例は WIDTH=240 HEIGHT=80)
[注]画像のディレクトリ指定はあなたの環境に合わせて変更して下さい。
|
<![CDATA[
<script language="JavaScript">
<!--
//イメージオジェクト
if (document.images)
{
img1=new Image(240,80); img1.src="./gif/title.gif";
img2=new Image(240,80); img2.src="./gif/kikuti2.gif";
}
//-->
</script>
]]>
|
■ イメージを表示する場所に下の文を記述します。
IE3.02以前のブラウザは「イメージオブジェクト」が使えないので処理しないよう判定します。
|
<![CDATA[
<script language="JavaScript">
<!--
//イメージオブジェクトが使えるかの判定
if (document.images)
{
document.write("<A HREF='JavaScript:;'");
document.write(" onMouseOver='document.Title.src=img2.src;return true;'");
document.write(" onMouseOut='document.Title.src=img1.src;return true;'>");
document.write("<IMG SRC='./gif/title.gif' NAME='Title' WIDTH=240 HEIGHT=80 border=0></A>");
} else {
document.write("<IMG SRC='./gif/title.gif' NAME='Title' WIDTH=240 HEIGHT=80 border=0>");
}
//-->
</script>
]]>
|
離れた場所にあるリンクや画像にさわると「イメージが変わる」ようにするには、下の文を、離れた場所にあるリンクや画像を表示したいところに記述します。
|
<![CDATA[
<A HREF='JavaScript:;' onMouseOver='document.Title.src=img2.src;return true;'
onMouseOut='document.Title.src=img1.src;return true;'>こちらでも変わります</A>
<A HREF='JavaScript:;' onMouseOver='document.Title.src=img2.src;return true;'
onMouseOut='document.Title.src=img1.src;return true;'
onClick='window.open("../gif/baybridge.jpg","","width=320,height=220")'>
こちらでも変わり、クリックで小ウィンドウオープン</A>
<A HREF='JavaScript:;' onMouseOver='document.Title.src=img2.src;return true;'
onMouseOut='document.Title.src=img1.src;return true;'>
<IMG SRC='../gif/banner.gif' WIDTH=88 HEIGHT=31 border=0></A>これも代わります
]]>
|
|
|
