- ベストアンサー
クリッカブルマップの部分的な画像の入れ替え
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ネットでマウスオーバーで検索してください、ここで説明するよりも判りやすいですから(^_^; <span onmouseover="document.画像ID.src='変更画像URL';" onmouseout="document.画像ID.src='元画像URL';"> <img name="画像ID" alt="Sample" width="100" height="100" src="元画像URL"> </span> ---- <span onmouseover="document.画像ID.src='変更画像URL';" onmouseout="document.画像ID.src='元画像URL';"> 画像変更 </span> これだけ書いても判らないでしょうから(^_^;
その他の回答 (2)
- font_color
- ベストアンサー率45% (24/53)
大きな画像を背景にして、ボタン部分をpositionで指定し別の画像を置くというのはどうですか？
お礼
positionという方法もあるんですね。 マウスオーバーと合わせて検索して試してみます。 ありがとうございます。
- Yohjira
- ベストアンサー率66% (14/21)
画像を分割したものをそれぞれつなげて1枚の画像に見えるように表示して、 特定の画像だけ入れ替えるような方法はだめでしょうか？
お礼
Yohjira様 早速のご返事ありがとうございます。 出来れば画像分割しないで入れ替えしたいと考えております。 誠にすみません。
関連するQ&A
- クリッカブルマップを使わず同じ効果を得たい…。
出来るかも分からないのですが、宜しくお願いします。 題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。 そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか？ 実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。 なお、FlashはNGとさせてください。 どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。 宜しくお願いします。
- ベストアンサー
- CSS
- クリッカブルマップで切り替えた先の画像に部分リンク
javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。（下記コード） イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。 この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。 詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="～～～" /> </map> </figure>
- ベストアンサー
- 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
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像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
- 画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 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
- クリッカブルマップで同時にリンク
クリッカブルマップで、２つのページに同時にリンクさせたいのですが、下記のタグだと１ヶ所しかリンクができません。同時にリンクをさせるには、どんなタグをどのように追加したらいいのでしょうか。よろしくお願いします。 <MAP NAME="map1"> <AREA SHAPE="RECT" COORDS="*,*,*,*" HREF="xxx.html" target="migi"> </MAP>
- 締切済み
- HTML
- クリッカブルマップから 小ウィンドウを出して閉じれますか？
クリッカブルマップをクリックして 小ウィンドウをサイズ指定で出して ウィンドウにはツールバーやメニューバーなど表示させないで一番シンプルに出したいのです。 小ウィンドウを閉じる時にはウィンドウ内に作ったGIFボタンで閉じさせたいのですが どのようにしたら良いのでしょうか？ クリッカブルマップでは無くてテキストからのリンクから小ウィンドウを出すテストでは成功したのですがクリッカブルにしたら複雑すぎてよく分からなくなってしまいました よろしくおねがいしまーす
- ベストアンサー
- JavaScript
- PDFファイルをクリッカブルマップで開く
HTML文書の作成をしています。 HTMLページの中にPDFファイルを貼り付けクリッカブルマップでリンクするような画面です。 そこでPDFファイルをクリッカブルマップで開きたいのですが、今使っているクリッカブルマップ作成支援ツールではPDFファイルを開くことができません。 良い作成支援ツールをご存知でしたら教えてください。
- 締切済み
- 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>
- ベストアンサー
- JavaScript
お礼
概要が何となくわかりました！ 早速マウスオーバーを検索して試してみます。 ありがとうございます！