スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

マウスオーバー時に画像を切り替える2

サムネイルのような小さな画像を3つ並べて、

画像にマウスを合わせた時に大きな画像として一箇所に表示するように設定します。

1.まずは小さな画像3枚と大きな画像1枚を貼り付けます。

ソースの例は以下のとおり


  <p><img src="images/onsen.jpg" width="580" height="386" alt="温泉" /></p>
 
  <p>
  <img src="images/onsen.jpg" width="100" height="77" alt="温泉" />
  <img src="images/himawari.jpg" width="100" height="77" alt="ひまわり" />
  <img src="images/ichigo.jpg" width="100" height="77" alt="いちご" />
 </p>


2.大きな画像の方を選択したらプロパティのIDに「change1」を入力します。
  これで、大きな画像のIDがchange1になりました。

3.小さな画像の方を選択したら、メニューのウィンドウからビヘイビアーを選択し、+マークをクリックしたら 「スワップイメージ」を選択します。

  先ほどID登録した イメージ "change1"を選択し、ソースの設定欄に実際に大きく表示させたい画像のURLを入力
  もしくは「参照」から選択します。
 
  3.の作業を他の2つの画像に対しても行います。

 20131010_20131010221958f0a.jpg

最終的なソースは以下になりました。

  <p><img src="images/onsen.jpg" alt="温泉" name="change1" width="580" height="386" id="change1" /></p>
  <br />
  <p>
  <img src="images/onsen.jpg" alt="温泉" width="100" height="77" onmouseover="MM_swapImage('change1','','images/onsen.jpg',1)" onmouseout="MM_swapImgRestore()" />
  <img src="images/himawari.jpg" alt="ひまわり" width="100" height="77" onmouseover="MM_swapImage('change1','','images/himawari.jpg',1)" onmouseout="MM_swapImgRestore()" />
  <img src="images/ichigo.jpg" alt="いちご" width="100" height="77" onmouseover="MM_swapImage('change1','','images/ichigo.jpg',1)" onmouseout="MM_swapImgRestore()" />
  </p>
 


トラックバック

コメント

コメントを残す

Secret


スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。