●マウスが乗ると画像が変わる

非体系的HP講座の第二回です。
RealAudioファイルの再生に引き続き、某Fさんからリクエストがありましたので、お答えします。

さて、今回の件、どういうことかと言いますと、




と、いうことですね。
僕も初めて使ってみました（爆）
そしてネタが偏っていてゴメンナサイ。

コレをやるにはJAVAスクリプトという技を使います。
↑を例にすると、スクリプトはこんなかんじになります。

まずはHTMLソースを表示して、＜HEAD>タグの中に以下のモノをいれます。<HEAD>と</HEAD>の間に囲まれているところのどこかにコピー＆ペーストで入れてください。
<SCRIPT LANGUAGE="JavaScript">
<!-- if (navigator.appVersion > "3")
{ img0 = new Image(); img0.src = 'java1-a.gif'; img1 = new Image(); img1.src = 'java1-b.gif'; }
function imgChange(imgName,imgNum) { if (navigator.appVersion > "3")
{ document.images[imgName].src = eval(imgNum + '.src'); } } //--> </SCRIPT>
次に、配置したいところに次のモノを入れます。
<A HREF="dansyaku_JAVA1.shtml" onMouseover="imgChange('back','img1')" onMouseout="imgChange('back','img0')"> <IMG SRC="java1-a.gif" BORDER="0"></a>

これで↑のやつができます。全体のソースを確認したい人はブラウザでこのページのソースをみてください。

解説しますと、まず＜HEAD＞タグの中に入れたスクリプト。それの
{ img0 = new Image(); img0.src = 'java1-a.gif';
img1 = new Image(); img1.src = 'java1-b.gif'; }
ココの所でimg0.scrとimg1.scrの画像のアドレスを指定するわけです。

それで配置したいところに書いたソースの
<A HREF="dansyaku_JAVA1.shtml" onMouseover="imgChange('back','img1')" onMouseout="imgChange('back','img0')">
<IMG SRC="java1-a.gif" BORDER="0" ></a>

がリンクしているというわけです。

つまり
onMouseover="imgChange('back','img1')"
は「マウスを乗せたときは」の意味で、命令は「画像をimg1（つまりはjava1-b.gif)にする」となるわけです。
onMouseout="imgChange('back','img0')">
は同じように「マウスを離したときは」→「画像をimg0（つまりはjava1-a.gif）にする」という命令なわけです。
その次の
<IMG SRC="java1-a.gif" BORDER="0" >
はそこに表示する画像を載せておきましょう。
どうやら「元々ある画像」をマウスが乗ると「マウスが乗ったときの画像」にして、マウスを離すと「マウスが離れたときの画像（ここでは元々ある画像）」になるようです。結局、マウスが乗ると画像が変わる、という効果にしたいときは、「マウスを離したときと同じ画像」をココには載せておけば良いわけです。

＜補足＞
ココでは
onMouseover="imgChange('back','img1')" onMouseout="imgChange('back','img0')"
の命令がリンクを挿入するタグの<a><./a>の中に入ってます。
どうやら
onMouseover="imgChange('back','img1')" onMouseout="imgChange('back','img0')"
は何かの中に入れなければならないようです。
ココではリンクタグの中に入れてみましたが、画像をリンクにしたくない場合どうすれば良いか、よく分かりません。だれか教えてください。なお、<font>の中に入れてみたところ、I.E.では表示できましたが、ネスケでは表示されませんでした。


というわけで、以上、解説ですが、汎用性のある形でソースを載せておくのでコピー＆ペーストで自分のページ作りに使ってください。（赤字で日本語のところは各自変更するところです）

まず<HEAD>タグ内に以下の内容を挿入。
<SCRIPT LANGUAGE="JavaScript"> <!-- if (navigator.appVersion > "3")
{ img0 = new Image(); img0.src = 'img0に対応する画像のアドレス'; img1 = new Image(); img1.src = 'img1に対応する画像のアドレス'; }
function imgChange(imgName,imgNum) { if (navigator.appVersion > "3") { document.images[imgName].src = eval(imgNum + '.src'); } } //--> </SCRIPT>

そして、次を実際に画像を配置するところに挿入。
<A HREF="リンク先のhtmlアドレス" onMouseover="imgChange('back','img1')" onMouseout="imgChange('back','img0')"> <IMG SRC="img0が対応する画像のアドレス" BORDER="0"></a>

img0とかimg1とかの設定を増やすことで（img2とかimg3とか）複数の画像を変化させることも出来ます。
戻る


★★★液晶ディスプレイセットもあるよ（かがみ的説明）★★★