You are here: Home » DreamWeaver(ドリームウィーバー)テクニック » ロールオーバーイメージ <Vol.1>

ロールオーバーイメージ <Vol.1>

2014年7月23日 | Leave a comment(0) Go to comments

今回は、ページ上でマウスを動かしてカーソルが文字や画像の上に重なった時に、色や画像が変化する「ロールオーバー」をご紹介します。

例えば、サイトのグローバルメニューやバナーボタンなどをカーソルで選択すると、色が変化したりする画像をよく見かけるかと思います。
このDreamweverでは、そういった画像などの仕組みを簡単に設定できてしまいます。
その、『ロールオーバーイメージ』を作る方法についてご説明しましょう。

ロールオーバーは、Javascriptを使って作ることができますが、Dreamweaverでは挿入パネル、もしくは「ビヘイビア」ウィンドウから作成できます。

ここでは、画像を使ったロールオーバーの作り方をご説明します。

●ロールオーバーイメージの設定

“ロールオーバーに使う画像は2つ”
それぞれ2つの画像はFireworksなどの画像作成ソフトで、あらかじめ用意しておく必要があります。
    d21c                   
⇒1つ目は通常表示される画像、プライマリイメージ≫
 2つ目はマウスポインタを重ねたときに入れ替える画像セカンダリイメージ≫です。

 次に、ロールオーバーイメージを設置したい場所にカーソルを置いた状態で、

挿入>イメージオブジェクト>ロールオーバーイメージを選択します。

d21a すると、下のような「ロールオーバーイメージの挿入」ウィンドウが開くので、
ここで、必要な項目を入力していきます。
d21b

【項目の説明】
①イメージ名
<img>タグのid属性をここで設定できます。
⇒アルファベットの英数字で任意の名前を入力

②元のイメージ ≪プライマリイメージ≫
 1つ目の画像(通常表示)を指定します。
⇒最初に読み込まれる画像名

③ロールオーバーイメージ ≪セカンダリイメージ≫
 2つ目の画像(ロールオーバー時)を指定します。
⇒マウスが重なったときの画像名

④ロールオーバーイメージのプリロード
 これにチェックすると、HTMLファイルの読み込み時に時間がかかりますが、ロールオーバーイメージがスムーズに表示されるようになります。

⑤代替テキスト
 <img>タグのalt属性をここで設定できます。
⇒画像が表示されなかった場合に表示させるテキストを入力

⑥クリック時にURLへ移動
リンク先を指定する場合はここにアドレス、ファイル名を入力

以上、項目を入力し終えたら、OKをクリックし、ロールオーバーの完成です。

一度ブラウザでプレビューして確認してみましょう。

Leave a Comment