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

非体系的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とか)複数の画像を変化させることも出来ます。



戻る


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