●マウスが乗ると画像が変わる |
非体系的HP講座の第二回です。 RealAudioファイルの再生に引き続き、某Fさんからリクエストがありましたので、お答えします。 さて、今回の件、どういうことかと言いますと、 と、いうことですね。 僕も初めて使ってみました(爆) そしてネタが偏っていてゴメンナサイ。 コレをやるにはJAVAスクリプトという技を使います。 ↑を例にすると、スクリプトはこんなかんじになります。 まずはHTMLソースを表示して、<HEAD>タグの中に以下のモノをいれます。<HEAD>と</HEAD>の間に囲まれているところのどこかにコピー&ペーストで入れてください。 次に、配置したいところに次のモノを入れます。 これで↑のやつができます。全体のソースを確認したい人はブラウザでこのページのソースをみてください。 解説しますと、まず<HEAD>タグの中に入れたスクリプト。それの
それで配置したいところに書いたソースの
がリンクしているというわけです。 つまり 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>タグ内に以下の内容を挿入。 そして、次を実際に画像を配置するところに挿入。 img0とかimg1とかの設定を増やすことで(img2とかimg3とか)複数の画像を変化させることも出来ます。 |
||
戻る |
★★★液晶ディスプレイセットもあるよ(かがみ的説明)★★★ |