今回は矩形からの脱却をめざします。
日本列島の画像は前回のものを使います。
ちょっと古いやり方を試してみます。
<img>タグのusemapオプションを使って、所謂クリッカブルマップという手法です。
クリッカブルマップとは、クリック可能なマップということ。
今回の日本地図のようなものをクリック可能にしてくれます。
アメブロで<map>タグや<area>タグが禁止タグではなかったので、試してみることにしました。
<area>タグのshapeオプションに"poly"、つまり多角形という形を設定出来るということです。
マウスで日本列島のあたりをポインタを当てて見て下さい。
矩形で指定されていないことがわかるかと思います。
ただ、今回のためにリアルに描いたために、かなりのデータ量になって、4万文字制限のギリギリですｗ。
海岸線は端折れるので、もう少しcoordsオプションのデータ量を減らせるかとは思います。
さて、マウスポインタを当てると、地方名を表示しますが、色は変わりません。
本来なら、cssで色を変えるところまでをやりたいのですが、どうも古い仕様なのか、cssでの設定でどうにかなるのか不明です。
とりあえず、今回はこのへんで。
ではでは