ロールオーバーイメージの作り方 / 初心者向けテクニック集 ／Dreamweaver入門 ドリームウィーバーの使い方
HOME > ちょっとしたテクニック集 > ロールオーバーイメージの作り方
ロールオーバーイメージとは、マウスを乗せると画像が変更する画像です。
|
 |
|
このロールオーバーイメージは、ドリームウィーバーの機能で作ることができます。
メニューの「挿入」から、「イメージオブジェクト」を選び、「ロールオーバーイメージ」をクリックします。
ロールオーバーイメージの挿入ウインドウが開くので、各項目を入力していきます。
各項目の内容は以下のとおりです。
イメージ名は、同じページ内で複数のロールオーバーイメージを作るときは、１つずつ別々のイメージ名をつけて下さい。ソースのコピー＆ペースト等によって、同じ名前のロールオーバーが２つ以上あると、どちらも動かなくなります。
いちいち面倒という方は、ソースで設定することもできます。
以下のソースをコピーし、変更部分を変えてご利用下さい。
<span onmouseover="document.pid_001.src='■ロールオーバーイメージ■';" onmouseout="document.pid_001.src='■元のイメージ■';"><img name="pid_001" alt="■代替テキスト■" title="■代替テキスト■" border="0" src="■元のイメージ■"></span>
変更部分
<span onmouseover="document.pid_001.src='■ロールオーバーイメージ■';" onmouseout="document.pid_001.src='■元のイメージ■';"><img name="pid_001" alt="■代替テキスト■" title="■代替テキスト■" width="39" height="50" border="0" src="■元のイメージ■"></span>
赤の数字部分：
自由な英数字を設定できます。３つとも同じ英数字にして下さい。
同じページ内では、１つのロールオーバーごとに別の数字を割り当てます。（２つ以上のロールオーバーイメージを同じページで作る場合は、各ロールオーバーイメージごとに別の英数字を割り当てて下さい）
青の文字部分：
■ロールオーバーイメージ■ ・・・ マウスを乗せたときの画像URL
■元のイメージ■ ・・・ マウスを乗せていないときの画像URL
■代替テキスト■ ・・・ 画像説明文（ALT）の部分。日本語でもOKです。
<img alt="■代替テキスト■" title="■代替テキスト■" border="0" src="■元のイメージ■" onmouseover="this.src='■ロールオーバーイメージ■'" onmouseout="this.src='■元のイメージ■'">
変更部分
<img alt="■代替テキスト■" title="■代替テキスト■" border="0" src="■元のイメージ■" onmouseover="this.src='■ロールオーバーイメージ■'" onmouseout="this.src='■元のイメージ■'">
青の文字部分：
■ロールオーバーイメージ■ ・・・ マウスを乗せたときの画像URL
■元のイメージ■ ・・・ マウスを乗せていないときの画像URL
■代替テキスト■ ・・・ 画像説明文（ALT）の部分。日本語でもOKです。
各ソースを使ったサンプルです。ソースを表示して参考にしてみて下さい。
汎用型
簡易型
もしこの記事が役に立ちましたら、ぜひブックマークやブログ・twitterで紹介して下さい。
