クリッカブルマップを使わず同じ効果を得たい…。

質問

出来るかも分からないのですが、宜しくお願いします。

題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。

そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか？

実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。
なお、FlashはNGとさせてください。

どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。

宜しくお願いします。

回答No.1

ORUKA1951 · ベストアンサー

まず、なぜクリッカブルマップ(イメージマップ)はダメなのですか？
　ＨＴＭＬ4.01strictでも使用できる＝ウェブ標準の手法で、きちんと作成するとテキストブラウザや検索エンジンにも対処できます。
→13.6 イメージマップ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6 )

　javascriptは、テキストブラウザ、読み上げソフト、検索エンジンを考慮した場合、最初に候補から脱落する手段です。そしてこれもイメージマップを使う方法と本質的に変わりありません。

　スタイルシートでは、長方形しか設定できません。

　HTML5のcanvasを使えば可能ですが、javascriptと併用しますし、なにしろ対応しているブラウザがまたまだ少ない。

　選択肢としては「13.6 イメージマップ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6 )」しかありません。

お礼

ORUKA1951様

有難うございます。
すみません、私の知識不足でした。というか、ちょうさ不足です。

>>ＨＴＭＬ4.01strictでも使用できる

イメージマップが準拠しているということすら知りませんでした。汗）
であれば、何も考えずmapを使用したいと思います。

ご返信が遅くなって申し訳ありませんでした。

今回は、非常に勉強になった他、知識の無さを通関してしまいました。
本当に有難う御座います。

やはり、javascriptは最終手段ですね。^^
感謝です。

回答No.2

神崎 渉瑠（@taloo）

JavaScriptを使えば「クリックした場所」を取得できますから、
その場所に応じてページジャンプを行えば、クリッカブルマップを作ることはできます。
（<canvas>でも<img>でも、<div>や他の要素でも、タグの種類は問いません。）

GoogleMapsのようなものを想像すればいいと思います。
クリックした場所の取得は「JavaScript 座標」で検索してみてください。

(x,y)がクリックした場所として、
たとえば、( x1<x && x<x2 && y1<y && y<y2 ) であれば、四角形(x1,y1) (x2,y2)の中をクリックしたと判断できます。
（この辺は中学か高校数学の問題です。）

つまり、ブラウザがやっている作業を全部自分で作るということですから、
クリッカブルマップがダメな理由はわかりませんが、
手間を考えれば、全部の処理をブラウザに任せられるクリッカブルマップが一番早いです。

お礼

有難うございます。

非常に複雑になってしまいますね・・・。

今回はアドバイス通り、mapを使用したいと思います。
有難うございます。