イメージマップ内での画像の変更【HTML・CSS・Java】
- <img src="imagemaptest.bmp" usemap="#imagemaptest" border="0">イメージマップを使用して画像内のリンクにマウスを当てると、指定した部分だけ画像が変更される方法について教えてください。
- また、TABLE内の背景にリンクを張ることは可能でしょうか？具体的な方法についても教えてください。
- ご教示いただける方、おねがいします。
- ベストアンサー
イメージマップ内での画像の変更【HTML・CSS・Java】
<img src="imagemaptest.bmp" usemap="#imagemaptest" border="0"> <map name="imagemaptest"> <area shape="rect" coords="152,167,359,451" href="***.html"> このようなタグでイメージマップを作成します。 そしてcoords="152,167,359,451"で指定したリンクにマウスオンした時に画像を変更する事は可能でしょうか？簡単に言うと画像の中のリンクにマウスを当てると指定した部分だけ画像が変更される方法です。 また、 background="test.jpg"でTABLE内に背景を指定し、その背景にリンクを張ることはかのうでしょうか？ おわかりになる方、お教え下さい(・・*)JavaでもCSSでもかまいません☆
- hideyuki-man
- お礼率42% (121/287)
- HTML
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
まず先に、ウェブで使用する画像はjpgかgif形式を推奨いたします。 （bmpはウィンドウズの保存形式であると共に画像自体が重いため） イメージマップの中にロールオーバーをする方法は存じ上げません。 ですが、イメージを分割し、ロールオーバーしたい部分だけ画像を二種類（オンとアウト）用意してＣＳＳなりＴＡＢＬＥなりでレイアウトすればいいかと思います。（※参考ＵＲＬをご参照ください） この場合、ロールオーバー部分以外のリンクをかけたい部分にアンカータグを書いてあげてください。 また、ＴＡＢＬＥ内の背景に直接リンクをかける事は不可能だと思います。背景を設定したＴＡＢＬＥ内に透明gifを任意のピクセルで指定してあげ、その透明gifにリンクをかければ背景をクリックしてるように見せかける事は可能です。 説明が下手で申し訳ないです。ご参考になれば幸いです。
関連するQ&A
- 背景画像にクリッカブルマップでリンクを飛ばす方法
背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■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> お手間おかけしますがどうぞよろしくお願い致します。
- ベストアンサー
- デザイナー・クリエイティブ職
- 画像に複数リンクをはる方法（イメージマップ）
画像は表示されるのですが、リンクがはれません。 どこがおかしいのでしょうか？ リンクをはる画像と、リンク先は別フレームで、表示させたいフレームの名前はinです。 ついでに、リンクをクリックした瞬間に出る点線の消し方もわかる方がいたら教えてください。 よろしくお願いします。 タグ（html内）↓ <body> <img src="http:～" usemap="mn"> </body> <map name="mn"> <area shape="rect" coords="298,298,355,262" href="http:～l"target="in"> <area shape="rect" coords="298,276,319,285" href="http:～"target="in"> <area shape="rect" coords="324,273,362,288" href="～html" target="in"> <area shape="rect" coords="367,276,399,286" href="～html" target="in"> </map>
- 締切済み
- HTML
- イメージマップで文章を表示したい。
下記の例のように、「map.gif」という画像の各箇所ごとにそれぞれのリンクを貼るのは下記の方法で出来ると思うのですが、 「coords="22,11,122,62"」にマウスが乗ったときに指定した箇所に文章を表示するにはどうしたらよいのでしょうか？ ※それぞれの箇所によって、それぞれ違った文章を表示したいです。 ※「map.gif」という画像が表示されている上段（下段でもＯＫ）に枠を作って、その中に説明文が表示される仕組み。 <img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area shape="default" href="map4.html" alt="リンク4"> </map> 宜しくお願いします。
- ベストアンサー
- HTML
- TABLEでのリンクについて
画像の中の指定した部分から違うページへリンクさせたくて <img src="image/ie.gif" width="550" height="285" border=0 usemap="#map1"> と入力してその後に <map name="map1"> <area shape="rect" coords="249,169,295,220" href="link.htm"> </map> としてリンクさせました。 その後に画像の上に違う画像を重ねたくて最初の画像をTABLEの背景にしようと思って <table background="image/ie.gif" width="550" height="285" border=0 usemap="#mapie"> と直しました。 そうすると画像を重ねる事はできたのですが、リンクができなくなってしまいました。 TABLEの背景画像からmapを使ってリンクさせる事はできないんでしょうか？それとも何か間違えていますか？ どなたかアドバイスをお願いします。
- ベストアンサー
- HTML
- 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でなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。
- 締切済み
- JavaScript
- イメージマップで画像変え
イメージマップで作成したリンクボタンを使って別の場所の画像を変えることはできるのでしょうか? またイメージマップを使っている画像を上の方法で変えることはできますか? ↓のはためしに作っているプログラムですがうまく動きません。 <IMG SRC="picture1" WIDTH="500" HEIGHT="271" BORDER="0" usemap="#picture1" NAME="picture1"> <MAP name="picture1"> <a href="#" onMouseOver="document.picture2.src=btn.src;return true" onMouseOut="document.picture2.src=picture2.src;return true"> <AREA shape="rect" coords="365,62,373,70" ALT="ボタン"></a> </map>
- 締切済み
- JavaScript
- 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
- 吹き出しに画像とコメントを入れるプログラム
下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <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
- 画像マップしたリンク先をクリックするとフェードでリンク先のページに切り
画像マップしたリンク先をクリックするとフェードでリンク先のページに切り替わることなどできないでしょうか？？ 問題のコードです <div id="main_ex"> <img id="mg" src="site02/ex_top03.jpg" usemap="#hisigata" border="0" /> <map name ="hisigata"> <area shape="rect" coords="10,498,149,532" href="site02/ex_01.htm"> <area shape="rect" coords="582,468,790,496" href="site02/ex_02.htm"> <area shape="rect" coords="800,465,932,493" href="site02/ex_03.htm"></div> href="site02/ex_01.htmに切り替わるときにフェードで切り替わりたいです。 (site02/ex_02.htm site02/ex_03.htmも同様) jQuery でも javascriptでもかまいません。 なにかよい考えございましたらぜひお教え願えたらと思います。 甘えた質問で申し訳ありませんが、よろしくお願いいたします。
- 締切済み
- JavaScript
- 画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 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
お礼
karakara24様☆ お答えありがとうございます(*'v'*) 天才ですね( *´ω`)(´ω｀*) 透明GIFとは考え付きませんでしたｖ(。・・。) それとbmpはいつもつかってりません☆気に留めていただき感謝します(*゜▽゜)*。_。)*゜▽゜)*。_。)