吹き出しに画像とコメントを入れるプログラム
- 画像とコメントを表示する吹き出しを作成する方法を教えてください。
- 下記のプログラムを使用して、画像とコメントを表示する吹き出しを作成したいのですが、うまくできません。
- 困っているので、方法があれば教えてください。
- ベストアンサー
吹き出しに画像とコメントを入れるプログラム
下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <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>
- zekusu
- お礼率64% (122/190)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞下記のプログラムで吹き出しを作成して ＞画像とコメントを表示したいのですが って、どこにもプログラムがないけど…？ まぁ、てきとうに・・・ 画像が無いのでわかりにくいけど、あとは適当にアレンジしてください。 <html> <style type="text/css"> .all {border:1px solid gray; width: 450px; height:300; background-color: Azure;} .image {width:80px; height:80px; background-color:PaleGreen; display:none; z-index:5; position:absolute; top:10px; left:10px;} .comment {display:none; z-index:10; position:absolute; top:10px; left:10px;} </style> <script type="text/javascript"> var com=[];var image=[]; var xy=[[400,20],[285,100],[200,200]]; //各画像の表示位置 //表示位置をセットする window.onload = function(){ var fukidasi = document.getElementById('fukidasi'); image = fukidasi.getElementsByTagName('img'); com = fukidasi.getElementsByTagName('span'); for (var i=0;i<image.length; i++){ image[i].style.top=xy[i][1]; image[i].style.left=xy[i][0] com[i].style.top=xy[i][1]+40; com[i].style.left=xy[i][0]+40; } } //画像、コメントの表示/非表示（番号、表示/非表示） function disp(n,func) { image[n-1].style.display=func?'block':'none'; com[n-1].style.display=func?'block':'none'; } </script> <body> <img src="画像名" usemap="#map" class="all"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道" onmouseover="disp(1,1)" onmouseout="disp(1,0)"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森" onmouseover="disp(2,1)" onmouseout="disp(2,0)"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田" onmouseover="disp(3,1)" onmouseout="disp(3,0)"> </map> <div id="fukidasi"> <img src="" class="image"><span class="comment">ゆきだぁ～</span> <img src="" class="image"><span class="comment">ねぷた</span> <img src="" class="image"><span class="comment">なまはげ</span> </div> </body> </html>
関連するQ&A
- 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
- 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
- クリッカブル・マップのリンクが効かない
下記のコードで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で制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(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
- 画像に複数リンクをはる方法（イメージマップ）
画像は表示されるのですが、リンクがはれません。 どこがおかしいのでしょうか？ リンクをはる画像と、リンク先は別フレームで、表示させたいフレームの名前は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
- html5で画像が好きなところにはれません
html5で画像が好きなところにはれません ワイド ハイトはで左づめになるのはできるのですが 問題のタグ <body> <img src="画像url" usemap="#画像url"> <map name="画像url"> <area shape="rect" coords="0,0,500,500" href="画像" alt="画像"> </map> </body>
- ベストアンサー
- 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
- テーブル内の行の間に隙間ができてしまいます
いつもお世話になります。 dreamweaverCS2でホームページを作っています。 2行1列のテーブル内のセルそれぞれに画像を配置しているのですが、 IE6で表示すると、行(画像）と行(画像）の間にスペース(白い）ができてしまい、 画像同士がくっつきません。 上の行にはイメージマップを使用しています。 なんとか画像をくっつけた状態で表示したいのですが、どこに問題があるでしょうか。 画像の大きさは上の行のものが742*69 下のものが742*18です。 ちなみにHTMLは下記のようになります。 また、Netscape7.1やsafariではくっついた状態で表示できます。 困っています。よろしくお願いします。 *****以下HTML************ <table border="0" cellpadding="0" cellspacing="0" width="742" > <tr> <td width="742" > <img src="images/header1_1.gif" alt="" width="742" border="0" usemap="#hd1_Map" vspace="0"/> <map name="hd1_Map"><area shape="rect" coords="260,50,366,65" href="index.html" alt="Homeへ" /> <area shape="rect" coords="367,50,475,65" href="about.html" alt="***について" /> <area shape="rect" coords="476,50,590,65" href="members.html" alt="****一覧" /> <area shape="rect" coords="591,50,700,65" href="syukketsu.html" alt="***" /> </map></td> </tr> <tr> <td><img src="images/subnavibar1.gif" alt="" width="742" border="0" vspace="0" /></td> </tr> </table> ****ここまで****
- ベストアンサー
- ホームページ作成ソフト
- HP制作。クリッカブルマップについて。
HP制作。クリッカブルマップについて。 1つのページにクリッカブルマップを使った画像(オンマウスで画像を入れ替える)を二つ使いたいのですが(たとえばmapAとmapB)上手くいかず、mapAの位置にmapBの入れ替え画像が表示されてしまいます。自分では原因をつきとめることが出来ませんでした。 map nameは分けてあります。リンク先・画像・座標は省略しました。 <img src="画像" alt="マップ" id="map" usemap="#B" border="0"> <map name="A"> <area shape="poly" coords="(略)" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" > 『省略』 </map> <img src="画像" alt="マップ画像" id="map" usemap="#B"border="0"> <map name="B"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像1"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像2"> 『省略』 </map>
- ベストアンサー
- HTML
- クリッカブルマップのリンクが‥
クリッカブルマップでリンクさせたくて、記述いたしましたが、リンクが有効になっていません。 ブラウザ上では画像表示のままでハイパーリンクになっておらず、目的のページへ行けない状態です。 これは何が原因でしょうか。 以下、htmlの記述です。みなさま、どうかご教授のほどお願いします。 <img src="./images/menu1.jpg" usemap="#linkmap" border="0" height="81" width="500"> <map name="linkmap"> <area shape="rect" coords="x15,y22,x88,y53" href="$home" alt="ホーム"> <area shape=rect coords="x88,y22,x203,y53" HREF="http://"> <area shape=rect coords="x201,y22,x310,y53" HREF="./index.cgi?mode=top"> <area shape=rect coords="x309,y22,x418,y53" HREF="http://"> </map>
- 締切済み
- HTML
お礼
ありがとう御座います。 ＨＰに関しては、まだまだ勉強中ですので大変助かりました。 本当にありがとう御座います。