WebScripter.jp

HTML、CSS、Javascript、ActionScript、php、デザインなどWeb制作に関する備忘録

クリッカブルマップでのロールオーバー

タグ：,
投稿：2010.01.16   カテゴリー：HTML/CSSname JavaScript   コメント/トラッックバック：0件  

クリッカブルマップでロールオーバーで画像を入れ替える方法をメモ。javascriptを使って画像を入れ替えます。

◆サンプル
test

イメージタグに、例えば「map」というidをふり、getElementByIdでセットしたidの画像を指定したイメージに置き換える。

PLAIN TEXT
JavaScript:
  1. function changeMapImage(imgPath) {
  2.   document.getElementById('map').src = imgPath;
  3. }

HTMLは以下の通り。

PLAIN TEXT
HTML:
  1. <img usemap="#Map" id="map" src="btn.gif" border="0" alt="test" width="200" height="200" />
  2. <map id="map" name="map">
  3. <area onmouseover="changeMapImage('btn-on.gif')" onmouseout="changeMapImage('btn.gif')" shape="circle" coords="101,100,70" href="#" />
  4. </map>

コメント/トラックバック

トラックバックURL

この投稿へのコメント/トラックバックはありません。

コメントする

« Wordpress for iPhoneで画像が投稿できない。

CSSで角丸ボックス、の再考  »

Copyright© 2009 WebScripter.jp All Rights Reserved.