m005
画像にマウスを重ねると別の画像を表示する
Copyright(C) 2004 web工房 All Rights Reserved
 |
 |
 |
web技
◆手順【htmlタグを記述】
※最初に表示する→画像1、マウスオンすると表示する→画像2 とすると
-----次の行から(copy)-----
<img src="(画像1のパス名)" width="60" height="40"
onmouseover="if(document.images) this.src='(画像2のパス)'"
onmouseout="if(document.images) this.src='(画像1のパス)'">
-----上の行まで(copy)-----
解説等
◆ <body>〜</body>に記述
◆この方法は、単にマウスが重なったらthis.src="" でリンク先を変更しているだけです。
※javascriptのif文をonmouseover=""に書き込んでいます。
◆二つの画像の縦横サイズをあらかじめ揃えておくことが必要です。
|
|
【応用技】 ◆[技g011]画像をワイプして入れ替える ※左の画像にマウスを重ねると画像がワイプして替わります |
keyword
◇onmouseover◇onmouseout◇src
history
◇(2004.09.26)一部修正 [技g011]の紹介を追加しました。
◇(2004.06)設置
注意
◆操作MENUの[Window Resize]を選択するとウィンドウサイズが変更可能です。インラインフレームの幅もウィンドウ幅に追従します。
◆上記の[web技]をクリップボードにコピーしテキストエディタに貼り付けて使用する場合は、表示のための改行記号や全角・半角スペースの記号等を削除して下さい。
-----次の行から(copy)-----
(この部分をクリップボードにコピーしてテキストエディタ等に貼り付けて下さい)
-----上の行まで(copy)-----