• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:JavaScriptとUsemapの切り替え)

JavaScriptとUsemapの切り替え

このQ&Aのポイント
  • JavaScriptとイメージタグのusemapを併用して、画像とusemapを切り替える方法について知りたいです。
  • 質問者はFirefox3.5での動作を想定していますが、他のブラウザでも問題ありません。
  • 質問者は既に試したが画像は切り替わるがusemapが切り替わらないという問題が発生しています。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

document.im.usemap = usename; ↓ document.im.useMap = usename; でどうですか? 一応こちらでは動いたみたいです。

komasys
質問者

お礼

「たかが小文字と大文字」と思ってあまり重要視していませんでしたが、 案外それが原因だったようですね。ありがとうございます。 あと、今再度試したのですが、DOMを使う方法でもなぜか行けました。 もしかしたら単純なミスだったのかもしれません。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • mapが機能しない

    以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか? <div><img src="images/head.jpg" alt="" usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>

    • ベストアンサー
    • HTML
  • 画像の一部を選択した時のみマウスポインタを変更

    <img src="img.gif" usemap="#sample" border="0"> <map name="sample"> <area shape="rect" coords="10,10,10,10" alt="sample" name="ex"> <area shape="rect" coords="10,10,10,10" alt="sample" name="ex"> </map> というようにスポットエリアを利用して、 そのエリアにカーソルを合わせた時に、 カーソルの形を変えるというような指示はできないでしょうか。。。 style="cursol:xxxx"; を利用するのかと思ったのですが、 できなかったので、、、、。

    • ベストアンサー
    • HTML
  • <map>の切り替え

    ウェブサイトを作っているのですが、たぶんJavaScriptだとできると思うのでどなたか分かればと思い、投稿しました。 操作的には、 <body> <div><img src="aaa.gif" usemap="#map01" border="0" name="changeImage"></div> <!--▼クリックエリア範囲01の場合--> <map name="map01"> <area shape="rect" coords="0,0,30,30" href="javascript:document.changeImage.src='bbb.gif'";> </map> <map name="map02"> <!--▼クリックエリア範囲01の場合--> <area shape="rect" coords="0,0,20,20" href="bbb.html"> </map> </body> のような感じで、初期設定のusemapがmap01なので、最初クリックする時は、map01のクリックエリア範囲でそのaaa.gifがbbb.gifに変わります。そして、bbb.gifに変わったとき、クリックエリア範囲を<map name="map02">にしたいのです。 できますでしょうか? 一応補足しておきますが、操作的には違う画面を出すとか、新しい画面に行った時、とかではないです。 同じ画面上の操作です。

  • 吹き出しに画像とコメントを入れるプログラム

    下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <img src="画像名" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田"> <area shape="rect" coords="310,181,341,221" href="アドレス" alt="岩手"> <area shape="rect" coords="275,221,305,245" href="アドレス" </map>

  • 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>

  • クリックしてリンク先に移動する地図をwebに掲載しましたが

    ホームページに地図の画像を掲載して、 その地図にいくつかのクリックできるポイントを設定し、 それぞれリンク先に移動するようにしました。 IEではキレイに地図の画像が表示できているのですが、 FireFoxとか、Netscapeでは地図に青い外枠が表示されます。 赤を基調にしたサイトなので不自然な感じがして困っています。 どのようにこれを回避したらよいのでしょうか。 具体的に下記付け加えるもの等ございましたら教えてください。 よろしくお願いします。 <MAP NAME=map1> <AREA SHAPE=rect COORDS="112,2,196,28" HREF="room1.htm"> <AREA SHAPE=rect COORDS="213,3,298,28" HREF="room2.htm"> <AREA SHAPE=rect COORDS="310,2,399,28" HREF="room3.htm"> <AREA SHAPE=rect COORDS="413,2,495,28" HREF="room4.htm"> <AREA SHAPE=rect COORDS="513,1,594,27" HREF="room5.htm"> <AREA SHAPE=rect COORDS="614,2,701,28" HREF="room6.htm"> </MAP><IMG USEMAP="#map1" SRC="worldmap.gif" WIDTH=702 HEIGHT=29 ALIGN=bottom>

    • ベストアンサー
    • CSS
  • map初心者です

    名前の付け方がわかりません。 なんでもいいのでしょうか?とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map">  <area shape="rect"   coords="220,148,179,200"   href="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="358,125,181,126"   href="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="167,336,178,141"   href="="http://12345" alt="**" target="_blank">  <area shape="rect"   coords="178,338,180,214"   href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。

    • ベストアンサー
    • HTML
  • 画像毎に違うクリッカブルマップを設定したい

    地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 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>

  • クリッカブル・マップのリンクが効かない

    下記のコードで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
  • Javascriptのマウスオーバー

    Javascriptでのマウスオーバーで、Mapを使って画像上に範囲指定しているリンク範囲にボーダーを表示させたいと考えています。 HTMLは、 <html> <head> <title></title> </head> <body> <img src="aaa.gif" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="78,200,228,241" href="bbb.html"> <area shape="rect" coords="326,168,476,209" href="ccc.html"> <area shape="rect" coords="78,141,228,182" href="ddd.html"> </map> </body> </html> このようになっています。 この状態で、マウスオーバー時にリンク範囲をボーダーで囲みたいと思っています。 JavascriptやCSSとの組み合わせ等でいろいろ探してみたのですが、どうしても上手くいきませんでした。どうしたらいいのか教えて下さい。 また、JavascriptやCSSでなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。