ロールオーバーイメージの作り方 / 初心者向けテクニック集 /Dreamweaver入門 ドリームウィーバーの使い方

ドリームウィーバーの使い方

HOME > ちょっとしたテクニック集 > ロールオーバーイメージの作り方

ロールオーバーイメージの作り方

ロールオーバーイメージとは、マウスを乗せると画像が変更する画像です。


サンプル ⇒

ロールオーバーイメージの作り方 サンプル


マウスを乗せてみて下さい

このロールオーバーイメージは、ドリームウィーバーの機能で作ることができます。

ロールオーバーイメージの作り方

メニューの「挿入」から、「イメージオブジェクト」を選び、「ロールオーバーイメージ」をクリックします。

ロールオーバーイメージの挿入ウインドウが開くので、各項目を入力していきます。

各項目の内容は以下のとおりです。

注意

イメージ名は、同じページ内で複数のロールオーバーイメージを作るときは、1つずつ別々のイメージ名をつけて下さい。ソースのコピー&ペースト等によって、同じ名前のロールオーバーが2つ以上あると、どちらも動かなくなります。

ロールオーバーイメージのソース

いちいち面倒という方は、ソースで設定することもできます。

以下のソースをコピーし、変更部分を変えてご利用下さい。

汎用型

<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>

の数字部分:
自由な英数字を設定できます。3つとも同じ英数字にして下さい。
同じページ内では、1つのロールオーバーごとに別の数字を割り当てます。(2つ以上のロールオーバーイメージを同じページで作る場合は、各ロールオーバーイメージごとに別の英数字を割り当てて下さい)

の文字部分:
■ロールオーバーイメージ■ ・・・ マウスを乗せたときの画像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で紹介して下さい。

>> テクニック集トップへ戻る

 

 このエントリーをはてなブックマークに追加  このエントリーを含むはてなブックマーク   twitter