ロールオーバーイメージとは、お客様またはお客様の顧客がマウスの上にマウスを置いたときに、他のイメージに変わるイメージです。これらは、ボタンやタブなどのインタラクティブな感触を作成するためによく使用されます。しかし、何かのロールオーバー画像を作成することは可能です。
このチュートリアルは、Dreamweaverでロールオーバーイメージを作成するのに役立つように設計されています。これは、Dreamweaverの次のバージョンを使用している人が使用するためのものです。
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
このチュートリアルの要件
- ドリームウィーバー上記のバージョンの1つ。
- 元画像この画像を最適化してください。これにより、ページの読み込みがより迅速になります。
- ロールオーバー画像この画像は元の画像と同じ大きさでなければなりません。また、元の画像と同様に、ページの読み込み時間を最適化する必要があります。
- ウェブページこれはロールオーバーイメージを置くHTMLページです。
開始する
- Dreamweaverを起動する
- ロールオーバーを行うWebページを開きます
ロールオーバーイメージオブジェクトを挿入する
Dreamweaverでは、ロールオーバーイメージを簡単に作成できます。
- 挿入メニューの 画像オブジェクト サブメニュー。
- 選択 画像のロールオーバー または ロールオーバー画像.
一部の古いバージョンのDreamweaverでは、代わりにImage Objectsの "Interactive Images"が呼び出されます。
Dreamweaverに使用する画像を教えてください
Dreamweaverは、ロールオーバーイメージを作成するために入力する必要のあるフィールドを含むダイアログボックスを表示します。
イメージ名
ページに固有のイメージ名を選択します。それはすべて1つの単語でなければなりませんが、数字、アンダースコア（_）およびハイフン（ - ）を使用できます。これは、変更する画像を識別するために使用されます。
元画像
これは、ページ上で開始する画像のURLまたは場所です。このフィールドには、相対パスまたは絶対パスのURLを使用できます。これは、Webサーバー上に存在するイメージ、またはページと共にアップロードするイメージでなければなりません。
ロールオーバー画像
これは、画像の上にマウスを移動すると表示される画像です。元のイメージと同じように、これはイメージへの絶対パスまたは相対パスです。ページをアップロードするときには、イメージが存在するかアップロードされている必要があります。
プレロードロールオーバーイメージ
ロールオーバーがより迅速に表示されるので、このオプションはデフォルトで選択されています。ロールオーバーイメージをプリロードすることを選択することにより、Webブラウザはマウスがロールオーバーするまでキャッシュに格納します。
代替テキスト
良い代替テキストは、あなたのイメージにアクセスしやすくします。イメージを追加するときは、常にある種の代替テキストを使用する必要があります。
クリックすると、URLに移動します
ほとんどの人は、ページ上の画像をクリックすると画像をクリックします。だからあなたはそれらをクリック可能にする習慣があるはずです。このオプションを使用すると、画像をクリックしたときに閲覧者を誘導するページまたはURLを指定できます。しかし、このオプションはロールオーバを作成するためには必要ありません。
すべてのフィールドを完了したら、をクリックします。 OK Dreamweaverにロールオーバーイメージを作成させます。
DreamweaverがあなたのJavaScriptを書き込む
コードビューでページを開くと、DreamweaverによってJavaScriptのブロックが
あなたのHTML文書のこのブロックには、マウスがロールオーバーするときにイメージをスワップさせるために必要な3つの機能と、それを選択した場合はプリロード機能が含まれています。
関数MM_swapImgRestore（）関数MM_findObj（n、d）関数MM_swapImage（）関数MM_preloadImages（） Dreamweaverでロールオーバーイメージをプリロードすることを選択した場合は、ドキュメントの本文にHTMLコードが表示され、イメージがより高速に読み込まれるようにプリロードスクリプトが呼び出されます。 onload = "MM_preloadImages（ 'shasta2.jpg'）" また、Dreamweaverはイメージのすべてのコードを追加し、リンクします（URLを含む場合）。ロールオーバ部分は、onmouseoverおよびonmouseout属性としてアンカータグに追加されます。 onmouseout = "MM_swapImgRestore（）"onmouseover = "MM_swapImage（ 'Image1'、 ''、 'shasta1.jpg'、1）" フル機能のロールオーバー画像を見て、Shastaの心に何があるのかを学びましょう。 DreamweaverロールオーバーのHTMLを追加します。
ロールオーバーをテストする
