• ベストアンサー

入れ替えた画像をクリッカブルマップにしたい

xruzの回答

  • ベストアンサー
  • xruz
  • ベストアンサー率50% (72/143)
回答No.1

こんにちはxiaolong_gooさん、xruzです。 「画像を入れ替えてクリッカブルマップをセットする」というイメージでよかったでしょうか？ <Html> <Head> <title>clickable</title> </head> <script language="javascript"> <!-- function tubo() { document.kabeimg.src="door.jpg"; document.kabeimg.useMap="#kabemap"; } //--> </script> <body> <form method="post" name="frm"> <input type="button" name="btm" value="imageChange and setMap" onclick="tubo();"><br> </form> <map name="kabemap"> <area shape="rect" coords="100,0,200,100" href="door1.html" alt="door"> </map> <img name="kabeimg" src="kabe.jpg" alt="kabe" border="1" width="200" height="100"> </body> </html> Ie5.5sp2、Ie5.0sp2、NN6.1で動作確認済み。 NN4.75では動作不可。 がんばってくださいね。

xiaolong_goo
質問者

お礼

ありがとうございました。 結局、レイヤーを使って解決しました。 しかし、レイヤーがうまくできない場合もありますので、参考にさせていただきます。

この回答がついた質問に戻る
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • クリッカブルマップで・・・

    ランダムにクリッカブルマップを出す事は出来るでしょうか？ どこのホームページを見ても ランダム画像まででクリッカブルマップの説明はないんです。 どうしたらランダムにクリッカブルマップを出す事が出来るんでしょうか？ どなたか教えてください・・・。

  • クリッカブルマップを使わず同じ効果を得たい…。

    出来るかも分からないのですが、宜しくお願いします。 題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。 そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか？ 実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。 なお、FlashはNGとさせてください。 どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。 宜しくお願いします。

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

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

  • クリッカブルマップ＋カーソル変更

    私のサイトでは、カーソルを画像に変更して使っていて、リンクに触れるとカーソル画像が変わる、っていう設定にしているんですが、クリッカブルマップで指定したリンクではカーソルが変わりません。 どうすればクリッカブルマップのリンクもカーソルをかえられますか？ ちなみに、カーソルの指定はスタイルシートの外部指定でやっていますが、クリッカブルマップではないリンクでは、ちゃんとカーソルが変わります。

  • クリッカブルマップとインラインフレームを組み合わせたい

    こんにちは。自分でも検索してしらべたのですが、どうしてもわからないので、質問させていただきます。 現在、ページを製作中なのですが、タイトルのとおり、クリッカブルマップ画像の上にインラインフレームを組み合わせる方法がわからず、困っています。 透過したインラインフレームを、女の子の画像に重ねて表示してあります。この女の子の画像にメニューが書いてあるので、それをクリッカブルマップにして、インラインフレームにリンクを表示したいと思っています。 画像の上にインラインフレームを重ねて表示するのには成功しましたが、クリッカブルマップのタグを書き加えると、画面が真っ白になってしまいます。 クリッカブルとインラインを組み合わせたデザインのサイトは結構あるので参考にしようとしてみましたが今いちわからなくて・・・ 回答よろしくお願いします。

  • クリッカブルマップで画像と画像の間に隙間が出来てしまう

    現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像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
  • クリッカブルマップを使いながらロールーバーってできるんでしょうか？

    色々調べたのですが方法がわからず困っています。 実現したいことは、 人の顔の画像（gif画像）の鼻や口や目にカーソルを合わせたときにその部分だけ変化させたい、ということです。 クリッカブルマップで多角形を指定している場合その部分だけの変化というのはできないのでしょうか？ flashならできるという情報は見たのですがjavascriptを使って考えています。 宜しくお願いします。

  • クリッカブルマップ上でカーソルを追うタグ

    ＨＰでカーソルを追っかけるアイコン（マウスストーカー？）を付けたいのですが、 普通に付けることは出来たのですが クリッカブルマップを使用していて、その上にカーソルをもっていくと アイコンが消えてしまいます。 クリッカブルマップで使用している画像からカーソルを外すと 再びカーソルを追いかけてきます。 マップ上にメニューなどあるので画像の上でも追いかけられるように したいのですが、どうしても出来ません。 それともクリッカブルマップ上では追いかけることは不可能なのでしょうか。 どなたか詳しい方、教えていただけると助かります。 宜しくお願いします。

    • ベストアンサー
    • HTML
  • 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>

  • クリッカブルマップとアイフレームを並べる

    初めまして。こんにちは。 クリッカブルマップとアイフレームを 並べる方法を教えてください。 ↓こんな風にです ＿＿＿＿＿＿＿　　　＿＿＿＿＿＿＿＿ C-map　　　　　｜　｜　アイフレーム　｜ 　　　　　　　　　　｜　　　　　　　｜ のメニュー画像｜　　｜＿＿＿＿＿＿＿｜ ￣￣￣￣￣ どうしても平行に並ばないのですが・・。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する
質問する