マウスアップで文字を表示する

集合写真、等のウエブ画面上でAさんにマウスを当てたらAさんの名前が表示されるようにしたい、どのように文字を埋め込んだら良いのか教えて欲しい。中田

No.1 回答者： t_fumiaki 回答日時： 2016/04/30 15:46

クリッカブルマップを使う。

詳細は検索して調べる様に。

画像の左上を（0,0)、右下を（横max、縦max）として区画を定義。

例として添付図で説明。
赤にマウスオンしたら赤、青にマウスオンしたら青と表示する。
この場合のhtmlの記述は以下
<img src="clipmap.gif" usemap="#Map" alt="" title="">
<map name="Map">
<area shape="rect" coords="0,0,100,100" href=#" title="赤">
<area shape="rect" coords="100,0,200,100" href=#" title="水色">
<area shape="rect" coords="0,100,100,200" href=#" title="薄い赤">
<area shape="rect" coords="100,100,200,200" href=#" title="青">
</map>

実際に表示すると下記
http://www.tfumi01.com/test/test.html