Cafi Netつながる情報技術
  1. トップ>
  2. DW CS4 の使い方>
  3. スワップイメージ

CS4を使ったスワップイメージの設定方法

マウスを合わせると画像が切り替わる設定をご紹介します。

スワップイメージのメインイメージ

スワップイメージのサンプル1 スワップイメージのサンプル2 スワップイメージのサンプル3

小さな画像にマウスを合わせると、大きな画像(1箇所)が切り替わります。

手順1「イメージの挿入」

ドリームウィーバーの画面右「挿入パネル」の「イメージ」から、大きな画像1枚と小さな画像3枚を挿入します。

画像のサイズや名称は、ご自身のサイトに合わせてください。

現時点でのソースコード
<p><img src="images/onmouse1.jpg" width="480" height="319" /></p>
<p>
<img src="images/onmouse1.jpg" width="100" height="66" />
<img src="images/onmouse2.jpg" width="100" height="66" />
<img src="images/onmouse3.jpg" width="100" height="66" />
</p>

手順2「IDの挿入」

ドリームウィーバーの分割もしくはデザインの画面で、大きな画像(切り替わる位置の画像)を選択して下さい。

画像を選択したら、プロパティのIDに「mainimg1」を入力します。

IDの挿入

現時点でのソースコード
<p><img src="images/onmouse1.jpg" name="mainimg1" width="480" height="319" id="mainimg1" /></p>
<p>
<img src="images/onmouse1.jpg" width="100" height="66" />
<img src="images/onmouse2.jpg" width="100" height="66" />
<img src="images/onmouse3.jpg" width="100" height="66" />
</p>

手順3「ビヘイビアの追加」

続いて、小さな画像を選択します。

小さな画像を選択したら、ドリームウィーバーの画面右「タグインスペクタ」-「ビヘイビアの追加」をクリックします。

+(プラスのマーク)がビヘイビアの追加です。

ビヘイビアの追加

ビヘイビアの追加から「スワップイメージ」をクリックします。スワップとは交換という意味です。

スワップイメージ

スワップイメージのイメージで「ID」を選択、ソースの設定で「表示する画像を選択」(参照から選択)します。「OK」をクリックで、1枚目の設定が完了します。

同じ設定を、切り替えたい小さな画像全てに行ないます。

現時点でのソースコード
<p><img src="images/onmouse1.jpg" name="mainimg1" width="480" height="319" id="mainimg1" /></p>
<p>
<img src="images/onmouse1.jpg" width="100" height="66" onmouseover="MM_swapImage('mainimg1','','images/onmouse1.jpg',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/onmouse2.jpg" width="100" height="66" onmouseover="MM_swapImage('mainimg1','','images/onmouse2.jpg',1)" onmouseout="MM_swapImgRestore()" />
<img src="images/onmouse3.jpg" width="100" height="66" onmouseover="MM_swapImage('mainimg1','','images/onmouse3.jpg',1)" onmouseout="MM_swapImgRestore()" />
</p>

ブラウザでプレビュー(F12)します。3枚の画像にマウスを合わせると、画像が切り替わります。以上で作業は完了です。

その他「代替テキストの設定など」

画像が表示できな環境の方のために、代替テキストも挿入したほうが良いと思います。代替テキストを挿入することで、検索エンジンが画像の意味を理解できるので検索エンジン最適化(SEO)にもなります。

今回は3枚で設定しましたが、もちろんもっと枚数を増やすことも可能です。商品イメージが沢山ある場合など、ユーザーが何度もクリックして切り替えなくて良いので便利かと思います。

小さな画像をクリックすると拡大画像が表示されるようにも設定できます。その場合は、マウスを合わせると画像が切り替わり、クリックすると拡大画像が表示されるという2パターンとなります。

拡大画像へのリンク設定は、小さな画像を選択してプロパティインスペクタからリンクを設定するだけです。

もう1セット増やしたい場合は、ソースコードをコピー&ペーストした後に、ID とイメージを変更すれば何セットでも増やせます。(例:ID の 1 を 2 に変えて、次は mainimg2 など)

小さな画像と表示される大きな画像を別々にすることもできます。その場合は、小さな画像Aにマウスを合わせると、大きな画像Bが表示されるというようになります。ご自身のサイトの環境に合わせて利用して頂けたらと思います。