- ベストアンサー
吹き出しに画像とコメントを入れるプログラム
- 画像とコメントを表示する吹き出しを作成する方法を教えてください。
- 下記のプログラムを使用して、画像とコメントを表示する吹き出しを作成したいのですが、うまくできません。
- 困っているので、方法があれば教えてください。
- 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>
お礼
ありがとう御座います。 ＨＰに関しては、まだまだ勉強中ですので大変助かりました。 本当にありがとう御座います。