アプリ版：「スタンプのみでお礼する」機能のリリースについて

JavaScriptで画像置換えてクリッカブルマップは可能でしょうか？

解決済

  • 質問者：MusaGoro
  • 質問日時：
  • 回答数：7件

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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (7件)

No.6ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

>document.MapImg.usemap = hotspot;


の部分、
document.MapImg.useMap = hotspot;
にして下さい。
http://msdn.microsoft.com/library/default.asp?ur …
後の注意点は、既に指摘されている通り。
    • good
    • 0
    • 件
通報する
この回答へのお礼

BLUEPIXY様

ご回答ありがとうございます。
完璧に動作しました。
何と単純な問題だったんでしょう。でも、私には絶対に分からないことでした。

通報する
お礼日時：2006/05/06 21:14

No.7

  • 回答者： LLLuna
  • 回答日時：

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>
（後略）

これで大丈夫、なはずです。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： LLLuna
  • 回答日時：

最初に書いたサンプルソースではエラーになります。

2回目で書いたとおり、}が1つかけているためです。
3回目の状態で改めて試してみたところ、Firefox1.5.0.3及びOpera8.54では意図通りに動作しましたが、IE6.0の場合、画像の変更は出来るものの、クリッカブルマップの位置の変更は出来ませんでした。
IEは、残念ながらusemap属性値の書き換えをサポートしていないと考えざるをえません。（2回目のIE4対応も無駄です。なお、取得ならサポートしています）
どうしても、IEでも実現させたい場合は、何か代替となる方法を考えないと無理なようです。
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： LLLuna
  • 回答日時：

何度も何度もすいません。

（大丈夫かな……）
2番目のif文は、else if文にしてください。（投稿後に修正できると良いんだけど……）
こうしないと、IE5以降では二重に処理が行われることになります（汗）。実害はありませんが……。

あと、DOMが無効な環境に対する配慮もしておくと良いでしょう。
    • good
    • 0
    • 件
通報する
この回答へのお礼

LLLuna様

ご回答、ありがとうございます。
教えて頂いたコードを実際のソースへ移植したのですが、ラジオボタンで画像の入れ替えから出来なくなってしまいました。
ラジオボタンを押すを、IEのステータスバーに「ページでエラーが発生しました」と表示されてしまいます。
移植の仕方がいけないのでしょうか？
IEは６です。
何か分かれば教えて下さい。よろしくお願いします。

通報する
お礼日時：2006/05/06 16:37

No.3

  • 回答者： LLLuna
  • 回答日時：

すいません。


先ほどのサンプルソース、}が一つ足りませんでした。
あと、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>
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： LLLuna
  • 回答日時：

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属性（画像が表示できないときの代替文字。画像無しの時、自然に読めるように書く必要がある）が必須です。
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： LAIT
  • 回答日時：

今から８年前に、とほほのWWW入門の掲示板で、同じ質問が出ていました。


http://www.tohoho-web.com/lng/199811/98110069.htm
掲示板の内容からすると、無理だとは書いてありますが、何しろ８年前の情報ですからね・・・。
あくまでも参考に

参考URL：http://www.tohoho-web.com/lng/199811/98110069.htm
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報