- ベストアンサー
集合写真の顔にマウスを当てたときに氏名表示
- 集合写真に複数人の顔にマウスを当てたときに、吹き出しで氏名を表示する方法をご紹介します。
- HTMLファイルの編集作業で、集合写真に複数人の顔にマウスを当てると、各人の名前が表示される方法についてご説明します。
- 集合写真の各人の顔にマウスを当てた際に、吹き出しで氏名を表示する方法について詳しく解説します。
- yji04jp
- お礼率65% (30/46)
- その他（インターネット・Webサービス）
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
写真分割難しいですか・・・では振り出しに戻って（透明オブジェクトは必要ありません） <html> <head> <title>マウスが重なったら名前を表示する</title> </head> <body> <IMG src="集合写真.JPG" width="800" height="600" border="0" usemap="#nameMap"> <MAP name="nameMap"> <AREA shape="circle" coords="315,237,20" title="会田さん"> <AREA shape="circle" coords=このデータを作ります> ＜－この行が人数分必要です <AREA shape="circle" coords="320,297,20" title="遠藤さん"> </MAP> </body> </html> 「circle」を使用したので座標は最小限ですみます。 写真の左上を基点として顔の中心までの座標と半径を指定 （X,Y,半径） 代替テキストを指定するかわりに「title」を使用しました。 座標の読み取り方は前回の紹介ページにあるとおりです。
その他の回答 (1)
- enyara
- ベストアンサー率55% (38/68)
「area shape」タグを使用すれば出来そうですが座標指定が大変そうなので 写真を分割してブラウザ上でつながるように表示させれば、あなたの考えどおりの<img src="img/集合写真.jpg" alt="だれそれさん">が可能ではないでしょうか？ （分割後の左右隣り合わせの画像は同じ高さでないとつながらなくなります） また「onmouseover="名前入り画像;" onmouseout="元画像"」でも可能かと。 参考までに「area shape」の用法をここで見つけました。他にもあると思います。 「タグインデックス Webサイト」
補足
返答、有り難うございます。写真を分割するのは難しそうなので、参考URL拝見しました。なるほどと思いましたが、既にある写真の複数の部分で吹き出しを表示しなければなりません。そこで、エクセルで枠なし・塗りつぶしなしの四角を作成し、コピーして写真に貼り付けることはできました。さて、この四角にマウスをもっていったときに、名前を吹き出しにしたいのですが、HTMLファイルをメモ帳で開き、以下のようにしてみました。 <TITLE></TITLE> </HEAD> <BODY background="bg02.gif"> <DIV style="top : 90px;left : 18px; position : absolute; z-index : 1; " id="Layer1"><IMG src="集合写真01.jpg" width="709" height="513" border="0"></DIV> <DIV style="top : 635px;left : 18px; position : absolute; ※方法１：ここに挿入<img src="img/透明な四角.gif" alt="だれそれさん"> ※方法２：ここに挿入<onmouseover="透明な四角.gif;" onmouseout"だれそれさん"> z-index : 2; " id="Layer2"><IMG src="集合写真02.jpg" width="709" height="525" border="0"></DIV> <DIV style="top : 1179px;left : 19px; position : absolute; z-index : 3; " id="Layer3"><A href="index.html"><IMG src="button4.gif" width="150" height="36" border="0"></A></DIV> <DIV style="top : 1180px;left : 179px; position : absolute; しかし、１，２いずれの方法でもうまくいきませんでした。入れる場所や、挿入文の前後の記述にミスがあるのでしょうか？ よろしくお願いいたします。
お礼
<AREA shape="circle" coords=このデータを作ります> の方法で、うまくいきました。座標も、写真をペイントで開いて読み取ることができました。 今回、良い勉強の機会になりましたので、次は少し凝った吹き出しなどにも挑戦してみます。 どうも有り難うございました。