とりあえず半歩

学んだことを1日1個、簡単なことでも良いから記録していきたい。

map, areaタグによるツールチップ表示と拡大縮小表示でハマったこと

HTML

目標

画像中の任意の座標上にツールチップで情報を表示する。

動機

表示するグラフのポイントの値を表示したいため（グラフ上の目盛を見て「だいたいこれくらい」は避けたいため）。

課題

map, areaタグを使用し、画像上の任意の座標にカーソルを持って行った時、ツールチップ表示を行う。

取組

環境

作業

表示したい画像をdisplay.jpg、ツールチップを表示したい(x, y)座標を(10, 10)から縦横10ピクセル幅の四角範囲、表示内容をhoge-fugaだとすると、それを実現するHTMLコードは次の通り

<img src="display.jpg" alt="" usemap="#testmap" />
<map name="testmap">
  <area shape="rect" coords="10,10,20,20" title="hoge-fuga" alt="hoge-fuga" />
</map>

画像形式はjpgでなくともpngでも大丈夫。他の画像形式も大丈夫だと思うけれど、試していない。

結果

IE11の拡大縮小表示がいつの間にか90%になっていて、それが原因で最初はうまくツールチップが表示されない場合があった。
(拡大縮小表示を設定していたことを忘れてたんだろうなー……いつ設定したんだろう)

表示されることもあれば、指定した四角の座標範囲を十字に四等分した内の右下部分だけツールチップが表示されたり、全然表示されなかったり。

それ以外は思ったどおり実装できた。

感想

ブラウザの拡大縮小表示にハマったのは恥ずかしいので、ブラウザの表示チェックは100%で行うようにしたい。いや、しよう。する。

初歩的な失敗で情けないが、対策して忘れなければ大切な知識ということで力をつけていきたい。

今回の内容とは離れてしまうけれど、グラフ表示もJavaScriptライブラリを使用してみたい。

参考