- ベストアンサー
JavaScriptで画像置換えてクリッカブルマップは可能でしょうか？
RADIOボタンを使って、画像の入れ替えは出来たのですが、それぞれの画像に異なるクリッカブルマップを定義することは可能でしょうか？ 以下のような記述をし、imgタグ内のusemapに値を渡せば、クリッカブルマップの位置も変わるかと思ったのですが、変化しません。 記述方法が間違っているのでしょか？ ご教授のほど、よろしくお願いします。 <SCRIPT Language=JavaScript> <!-- function changeMap(image,hotspot) { document.MapImg.src = image; document.MapImg.usemap = hotspot; } // --> </SCRIPT> </head> （中略） <map name=FPMap0> <area href="Link1.html" target=_self shape=rect coords="10,10,20,20"> </map> <map name=FPMap1> <area href="Link2.html" target=_self shape=rect coords="50,10,60,20"> </map> <img border=0 src="図1.GIF" usemap="#FPMap0" NAME=MapImg> <FORM NAME=myFORM> <INPUT TYPE=radio name=R1 onClick=changeMap('図1.GIF','#FPMap0') checked>図1<br> <INPUT TYPE=radio name=R1 onClick=changeMap('図2.GIF','#FPMap1')>図2 </FORM>
- MusaGoro
- お礼率70% (310/442)
- JavaScript
- 回答数7
- ありがとう数3
- みんなの回答 （7）
- 専門家の回答
質問者が選んだベストアンサー
>document.MapImg.usemap = hotspot; の部分、 document.MapImg.useMap = hotspot; にして下さい。 http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/usemap.asp 後の注意点は、既に指摘されている通り。
その他の回答 (6)
- LLLuna
- ベストアンサー率35% (13/37)
6氏のご指摘を踏まえ、IEでも動作するようにしたスクリプトのサンプルソースを書いておきます。 （前略） <meta http-equiv="Content-Script-Type" content="text/javascript"> （中略） <script type="text/javascript"> <!-- function changeMap(image,hotspot) { if(document.getElementById){ document.getElementById("MapImg").setAttribute("src",image); document.getElementById("MapImg").setAttribute("useMap",hotspot); } else if(document.all){ document.all("MapImg").setAttribute("src",image); document.all("MapImg").setAttribute("useMap",hotspot); } } //--> </script> （中略） </head> <body> （中略） <map name="FPMap0"> <area href="Link1.html" target="_self" shape="rect" coords="10,10,20,20" alt="リンク1"> </map> <map name="FPMap1"> <area href="Link2.html" target="_self" shape="rect" coords="50,10,60,20" alt="リンク2"> </map> <img border="0" src="画像1.GIF" usemap="#FPMap0" id="MapImg" alt=""> <form name="myFORM"> <label for="RA1"><input type="radio" name="R1" onClick="changeMap('画像1.GIF','#FPMap0')" id="RA1" checked>図1</label><br> <label for="RA2"><input type="radio" name="R1" onClick="changeMap('画像2.GIF','#FPMap1')" id="RA2">図2</label> </form> （後略） これで大丈夫、なはずです。
- LLLuna
- ベストアンサー率35% (13/37)
最初に書いたサンプルソースではエラーになります。2回目で書いたとおり、}が1つかけているためです。 3回目の状態で改めて試してみたところ、Firefox1.5.0.3及びOpera8.54では意図通りに動作しましたが、IE6.0の場合、画像の変更は出来るものの、クリッカブルマップの位置の変更は出来ませんでした。 IEは、残念ながらusemap属性値の書き換えをサポートしていないと考えざるをえません。（2回目のIE4対応も無駄です。なお、取得ならサポートしています） どうしても、IEでも実現させたい場合は、何か代替となる方法を考えないと無理なようです。
- LLLuna
- ベストアンサー率35% (13/37)
何度も何度もすいません。（大丈夫かな……） 2番目のif文は、else if文にしてください。（投稿後に修正できると良いんだけど……） こうしないと、IE5以降では二重に処理が行われることになります（汗）。実害はありませんが……。 あと、DOMが無効な環境に対する配慮もしておくと良いでしょう。
お礼
LLLuna様 ご回答、ありがとうございます。 教えて頂いたコードを実際のソースへ移植したのですが、ラジオボタンで画像の入れ替えから出来なくなってしまいました。 ラジオボタンを押すを、IEのステータスバーに「ページでエラーが発生しました」と表示されてしまいます。 移植の仕方がいけないのでしょうか？ IEは６です。 何か分かれば教えて下さい。よろしくお願いします。
- LLLuna
- ベストアンサー率35% (13/37)
すいません。 先ほどのサンプルソース、}が一つ足りませんでした。 あと、IE4に対応させる場合は、スクリプト部分を以下のようにしてください。 <script type="text/javascript"> <!-- function changeMap(image,hotspot) { if(document.getElementById){ document.getElementById("MapImg").setAttribute("src",image); document.getElementById("MapImg").setAttribute("usemap",hotspot); } if(document.all){ document.all("MapImg").setAttribute("src",image); document.all("MapImg").setAttribute("usemap",hotspot); } } //--> </script>
- LLLuna
- ベストアンサー率35% (13/37)
DOMを利用してみてください。 <script type="text/javascript"> <!-- function changeMap(image,hotspot) { if(document.getElementById){ document.getElementById("MapImg").setAttribute("src",image); document.getElementById("MapImg").setAttribute("usemap",hotspot); } //--> </script> </head> （中略） <map name="FPMap0"> <area href="Link1.html" target="_self" shape="rect" coords="10,10,20,20" alt="リンク1"> </map> <map name="FPMap1"> <area href="Link2.html" target="_self" shape="rect" coords="50,10,60,20" alt="リンク2"> </map> <img border="0" src="図1.GIF" usemap="#FPMap0" id="MapImg" alt=""> <form name="myFORM"> <input type="radio" name="R1" onClick="changeMap('図1.GIF','#FPMap0')" checked>図1<br> <input type="radio" name="R1" onClick="changeMap('図2.GIF','#FPMap1')">図2 </form> 余談ですが、属性値は必ずダブルクォーテーション（"）で囲ってください。囲わなくても良い場合がありますが、全部囲うのがベストです。また、script要素のlanguage属性は非推奨です。逆にtype属性が必須となっています。img要素とarea要素にはalt属性（画像が表示できないときの代替文字。画像無しの時、自然に読めるように書く必要がある）が必須です。
- LAIT
- ベストアンサー率32% (25/78)
今から８年前に、とほほのWWW入門の掲示板で、同じ質問が出ていました。 http://www.tohoho-web.com/lng/199811/98110069.htm 掲示板の内容からすると、無理だとは書いてありますが、何しろ８年前の情報ですからね・・・。 あくまでも参考に
関連するQ&A
- 画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 JavaScriptで制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、 もう一方のクリッカブルマップ(alt=area2)を押すと、 IE6の場合にエラーが発生してブラウザが終了してしまいます。 尚、FireFoxでは正常に動作します。 どこに原因があるかも分らず手詰まり状態です。 同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <script type="text/javascript"> <!-- function ChangeImg(mapname,usemapname) { document.map0.src = mapname; document.map0.useMap = usemapname; } //--> </script> </head> <body> <img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0"> <map name="usemap0"> <area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200"> <area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200"> </map> <map name="usemap1"> <area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250"> </map> <map name="usemap2"> <area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250"> </map> </body> </html>
- ベストアンサー
- JavaScript
- クリッカブルマップがきかない！？
html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか？？ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか？？ 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>
- ベストアンサー
- HTML
- クリッカブルマップでリンクを貼ったとき…
クリッカブルマップでリンクを貼ったとき、リンク周りにborderのような、枠、色をつけることはできないのでしょうか？ <IMG SRC="photo/建物配置図.jpg" ALT="選択してね" border="0" usemap="#haitizu"> <map name="haitizu"> <area shape="rect" coords="185,247,240,303" href="taikukann.html"" alt="体育館"> </map>
- ベストアンサー
- HTML
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか？ それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか？ 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>
- ベストアンサー
- HTML
- クリッカブルマップのリンクが‥
クリッカブルマップでリンクさせたくて、記述いたしましたが、リンクが有効になっていません。 ブラウザ上では画像表示のままでハイパーリンクになっておらず、目的のページへ行けない状態です。 これは何が原因でしょうか。 以下、htmlの記述です。みなさま、どうかご教授のほどお願いします。 <img src="./images/menu1.jpg" usemap="#linkmap" border="0" height="81" width="500"> <map name="linkmap"> <area shape="rect" coords="x15,y22,x88,y53" href="$home" alt="ホーム"> <area shape=rect coords="x88,y22,x203,y53" HREF="http://"> <area shape=rect coords="x201,y22,x310,y53" HREF="./index.cgi?mode=top"> <area shape=rect coords="x309,y22,x418,y53" HREF="http://"> </map>
- 締切済み
- HTML
- クリッカブル・マップのリンクが効かない
下記のコードでpngの画像上でリンクをつけましたが、カーソルをかざしても反応が有りません。どこが間違っているのでしょうか？ 皆様、ご教授お願いします <table width="750" align="center"> <tbody> <tr><td> <img src="top2.png" usemap="#top2"> <map name="top2"> <area shape="rect" coords="20,197,63,206" href="http://------.html" alt="A"> <area shape="rect" coords="78,198,121,206" href="http://------.html" alt="b"> <area shape="rect" coords="137,198,181,206" href="http://------.html" alt="c"> <area shape="rect" coords="196,198,239,206" href="http://------.html" alt="d"> <area shape="rect" coords="19,163,63,272" href="http://------.html" alt="e"> <area shape="rect" coords="77,264,121,272" href="http://------.html" alt="f"> </map> </td> </tr> </tbody> </table>
- 締切済み
- XML
- クリッカブルマップの下に隙間ができる
クリッカブルマップ画像をテーブルに入れて その下にテーブルを入れるとその間に隙間が出来てしまいます。 下のHTMLですが、どこが間違っているのか教えて下さい。 <img src="img/index/h_01.jpg" width="700" height="90" border="0" usemap="#Map"><map name="Map"> <area shape="rect" coords="8,15,189,74" href="index.html"> </map> 困っているのでよろしくお願いします！ 足りない部分があれば追加して記入しますのでご指摘ください。
- 締切済み
- HTML
- HP制作。クリッカブルマップについて。
HP制作。クリッカブルマップについて。 1つのページにクリッカブルマップを使った画像(オンマウスで画像を入れ替える)を二つ使いたいのですが(たとえばmapAとmapB)上手くいかず、mapAの位置にmapBの入れ替え画像が表示されてしまいます。自分では原因をつきとめることが出来ませんでした。 map nameは分けてあります。リンク先・画像・座標は省略しました。 <img src="画像" alt="マップ" id="map" usemap="#B" border="0"> <map name="A"> <area shape="poly" coords="(略)" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" > 『省略』 </map> <img src="画像" alt="マップ画像" id="map" usemap="#B"border="0"> <map name="B"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像1"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像2"> 『省略』 </map>
- ベストアンサー
- HTML
- 背景画像にクリッカブルマップでリンクを飛ばす方法
背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■CSSで書いているのは .bodytitle { background-image: url('http://**************/title.jpg' width="750" height="269" border="0" usemap="#maintop"); } ■HTMLのbodyの中に書いているのは <map name="maintop"> <area shape="rect" coords="12,10,280,80" href="http://******/" target="_blank"> <area shape="rect" coords="510,8,740,71" href="http://******/" target="_blank"> </map> お手間おかけしますがどうぞよろしくお願い致します。
- ベストアンサー
- デザイナー・クリエイティブ職
- クリッカブルマップについて
私は、Macintoshを使って、ＨＰ製作をしているのですが、 クリッカブルマップが、MacのSafariではちゃんと出来ているのに、 internet explorerだと見れません。 どこが違うのでしょうか？ご回答お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- BODY{cursor:crosshair;} --> </style> <title>サンプル</title> </head> <body background="002.jpg"> <div style="top : 40px;left : 90px; position : absolute; z-index : 1; " id="Layer1"> <img src="window18.jpg" usemap="#map1" alt=""> <map name="map1"> <area shape="rect" coords="586,247,617,261" href="info.html" target="iframe"> <area shape="rect" coords="622,247,660,261" href="info.html" target="iframe"> <area shape="rect" coords="666,247,690,261" href="contact.html" target="iframe"> <area shape="rect" coords="582,276,626,291" href="cosme.html" target="iframe"> <area shape="rect" coords="631,276,663,290" href="kaimono2.html" target="iframe"> <area shape="rect" coords="667,276,698,290" href="link.html" target="iframe"> <area shape="default" nohref> </map> </div> <div style="top : 145px;left : 190px; position : absolute; z-index : 1; " id="Layer2"> <iframe src="migi.html" border="0px" width="450" height="280" scrolling="AUTO" name="iframe"> </iframe></div> </body> </html>
- ベストアンサー
- HTML
お礼
BLUEPIXY様 ご回答ありがとうございます。 完璧に動作しました。 何と単純な問題だったんでしょう。でも、私には絶対に分からないことでした。