モバイルでイメージマップ

それぞれの番号のベージへ

モバイルでイメージマップがどうなるかの検証ページです。

いままで余り存在意義を感じなかったイメージマップですが、文字のリンクが小さくなりがちなモバイルで、たくさんの写真を行きつ戻りつしながら見ていく用途に使えないかと試してみました。

画像は幅が720あります。モバイルではおよそ半分に縮小されるので、1と2しか呼び出すことができないだろうという予測で作っています。

HTML3.2の頃にすでにありました。そのせいかは知りませんが設計思想が古いような気がします。usemapの属性値になぜ#が付くのか、idでなくname属性であるところなんかも。

一番の問題はcoordsの値がピクセル単位であること。画像が拡大縮小されている時にどのような扱いになるのかが定かでないことです。昔は画像を拡大縮小することは速度的にも画質的にも制約が大きく、文字は拡大できても画像は置き去りにされるブラウザなんかもありました。いまでは画像が拡大・縮小されていても気づかないことも珍しくありません。

htmlの記述

このページのイメージマップのための記述です

<p class="img"><img src="images/map720.png" title="this is a map" usemap="#img720"></p>
<map name="img720">
<area href="ht00201.html" shape="rect" title="1" coords="0,0,180,180">
<area href="ht00202.html" shape="rect" title="2" coords="180,0,360,180">
<area href="ht00203.html" shape="rect" title="3" coords="360,0,540,180">
<area href="ht00204.html" shape="rect" title="4" coords="540,0,720,180">
<area href="ht00205.html" shape="rect" title="5" coords="0,180,180,360">
<area href="ht00206.html" shape="rect" title="6" coords="180,180,360,360">
<area href="ht00207.html" shape="rect" title="7" coords="360,180,540,360">
<area href="ht00208.html" shape="rect" title="8" coords="540,180,720,360">
</map>