HTMLタグ/イメージタグ/画像内に複数リンクを設定する - TAG index Webサイト
画像の中に複数のリンクを貼りたいときに使うやつ。それがmapとareaの組み合わせ。
<img src="map.gif" alt="サンプル" usemap="#sample"> <map name="sample"> <area shape="rect" coords="22,11,122,62" href="map1.html" alt="リンク1"> <area shape="circle" coords="184,86,30" href="map2.html" alt="リンク2"> <area shape="poly" coords="87,78,30,110,81,139,69,113" href="map3.html" alt="リンク3"> <area shape="default" href="map4.html" alt="リンク4"> </map>
shapeで図形を指定しつつ、coordsで範囲を指定する。 とりあえずrectを覚えておきたい。
あと、usemapってあんまり使わないから、usermapって書いちゃって リンクが貼られていない、という凡ミスをやらかすことがあったので、それも注意する。
デフォルトだと指定された範囲のリンクをクリックしても同じタブ、もしくはウィンドウでリンクページに飛ぶので、areaタグにtarget="blank"を追記すると、aタグのtarget="blank"と同じような挙動でリンクページに飛ぶことができるようになる。
