読者です 読者をやめる 読者になる 読者になる

by shigemk2

当面は技術的なことしか書かない

mapとarea試し書き

HTML

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"と同じような挙動でリンクページに飛ぶことができるようになる。

マップ <MAP> <AREA> - HTMLタグリファレンス/Tips