Dreamweaverでロールオーバーイメージを作成する方法

by ジェニファー・キリン

ロールオーバーイメージとは、お客様またはお客様の顧客がマウスの上にマウスを置いたときに、他のイメージに変わるイメージです。これらは、ボタンやタブなどのインタラクティブな感触を作成するためによく使用されます。しかし、何かのロールオーバー画像を作成することは可能です。

このチュートリアルは、 Dreamweaverでロールオーバーイメージを作成するのに役立つように設計されています。これは、Dreamweaverの次のバージョンを使用している人が使用するためのものです。

Dreamweaver MX
Dreamweaver MX 2004
Dreamweaver 8
Dreamweaver CS3
Dreamweaver CS4
Dreamweaver CS5
Dreamweaver CS6

このチュートリアルの要件

ドリームウィーバー
上記のバージョンの1つ。
元画像
この画像を最適化してください。これにより、ページの読み込みがより迅速になります。
ロールオーバー画像
この画像は元の画像と同じ大きさでなければなりません。また、元の画像と同様に、ページの読み込み時間を最適化する必要があります。
ウェブページ
これはロールオーバーイメージを置くHTMLページです。

01/06

開始する

Dreamweaverを起動する
ロールオーバーを行うWebページを開きます

02の06

ロールオーバーイメージイメージオブジェクトを挿入する

イメージオブジェクトを挿入します。 J Kyrninによるスクリーンショット

Dreamweaverでは、ロールオーバーイメージを簡単に作成できます。

[挿入]メニューの[イメージオブジェクト]サブメニューに移動します。
「イメージロールオーバー」または「ロールオーバーイメージ」を選択します。

一部の古いバージョンのDreamweaverでは、代わりにImage Objectsの "Interactive Images"が呼び出されます。

03/06

Dreamweaverに使用する画像を教えてください

ウィザードを完了します。 J Kyrninによるスクリーンショット

Dreamweaverは、ロールオーバーイメージを作成するために入力する必要のあるフィールドを含むダイアログボックスを表示します。

イメージ名

ページに固有のイメージ名を選択します。それはすべて1つの単語でなければなりませんが、数字、アンダースコア（_）およびハイフン（ - ）を使用できます。これは、変更する画像を識別するために使用されます。

元画像

これは、ページ上で開始する画像のURLまたは場所です。このフィールドには、相対パスまたは絶対パスのURLを使用できます。これは、Webサーバー上に存在するイメージ、またはページと共にアップロードするイメージでなければなりません。

ロールオーバー画像

これは、画像の上にマウスを移動すると表示される画像です。元のイメージと同じように、これはイメージへの絶対パスまたは相対パスです。ページをアップロードするときには、イメージが存在するかアップロードされている必要があります。

プレロードロールオーバーイメージ

ロールオーバーがより迅速に表示されるので、このオプションはデフォルトで選択されています。ロールオーバーイメージをプリロードすることを選択することにより、Webブラウザはマウスがロールオーバーするまでキャッシュに格納します。

代替テキスト

良い代替テキストは、あなたのイメージにアクセスしやすくします。イメージを追加するときは、常にある種の代替テキストを使用する必要があります。

クリックされると、URLにジャンプする

ほとんどの人は、ページ上の画像をクリックすると画像をクリックします。だからあなたはそれらをクリック可能にする習慣があるはずです。このオプションを使用すると、画像をクリックしたときに閲覧者を誘導するページまたはURLを指定できます。しかし、このオプションはロールオーバを作成するためには必要ありません。

すべてのフィールドを完了したら、[OK]をクリックしてDreamweaverでロールオーバーイメージを作成します。

次のページに、Dreamweaverが記述するスクリプトを示します。

04/06

DreamweaverがあなたのJavaScriptを書き込む

JavaScript。 J Kyrninによるスクリーンショット

コードビューでページを開くと、HTML文書のにJavaScriptブロックが挿入されていることがわかります。このブロックには、マウスがロールオーバーするときにイメージをスワップさせるために必要な3つの機能と、それを選択した場合はプリロード機能が含まれています。

関数MM_swapImgRestore（）
関数MM_findObj（n、d）
関数MM_swapImage（）
関数MM_preloadImages（）

05/06

DreamweaverロールオーバーのHTMLを追加します。

HTML。 J Kyrninによるスクリーンショット

Dreamweaverでロールオーバーイメージをプリロードすることを選択した場合は、ドキュメントの本文にHTMLコードが表示され、イメージがより高速に読み込まれるようにプリロードスクリプトが呼び出されます。

onload = "MM_preloadImages（ 'shasta2.jpg'）"

また、Dreamweaverはイメージのすべてのコードを追加し、リンクします（URLを含む場合）。ロールオーバ部分は、onmouseoverおよびonmouseout属性としてアンカータグに追加されます。

onmouseout = "MM_swapImgRestore（）"
onmouseover = "MM_swapImage（ 'Image1'、 ''、 'shasta1.jpg'、1）"

06の06

ロールオーバーをテストする

フル機能のロールオーバ画像を見て、Shastaの心に何があるかを学んでください。