jQueryを使わない擬似イメージマップ

先にデモ画面を見たい場合は こちら。 擬似イメージマップのデモページ

画像とjavascriptで管理しています。jQueryは使用してません。

画面の拡大縮小には対応ができていません、PCのウインドウサイズによる拡大縮小は行われ、対応しています。

 

本来のhtmlのイメージマップは以下のようにマップxy座標を記述します。
めんどくさいですよね。

例:
<img src=”xx.jpg” usemap=”#linkmap”>
<map name=”linkmap”>
<area shape=”rect” coords=”44, 25,184,81” href=”./a.html” />
<area shape=”rect” coords=”51,185,199,246” href=”./b.html” />
</map>

 

マップxy座標を生成するジェネレーターもインターネット上にありますが
そのページから離れて後からもう一度修正しようとするのはできないようです。

私は「地図をクリックして天気を調べる」というホームページが欲しかったです。
行きたい都市を追加するとマップxy座標の追加修正が発生します。

レスポンシブ対応で、かつ、マップxy座標を使いたくない。
ということで、javascriptで擬似イメージマップ機能を作りました。

マップxy座標の追加修正もエクセルの図の配置のようにしたい!。
この機能はエクセルで「リンク領域エディタ」を作りました。
(マップxy座標の修正が必要なければペイントソフトで代用できます)

ここでは、作成したhtmlとjavascript、リンク領域エディタについて紹介します。

jQueryを使用してもイメージマップのレスポンシブ対応ができますがjQueryのライセンスはどうなの?
「jQueryプロジェクトは、MITライセンスの条件のもとで使用してもよい」ということなので少し考えてしまいます。

実際にはダウンロードしたjqueryのファイルをメモ帳などで開くと一行目に
/*! jQuery v3.1.1 | (c) jQuery Foundation | jquery.org/license */

などのコメントで記載されてると思います。
ですのでそのまま使えばライセンス違反にはならないそうです。

サイトマップに戻る  次ページ・本来のhtmlイメージマップとは