area要素
area要素はmap要素やtemplate要素の子要素として利用できクリッカブルマップのリンクを指定することができます。
href属性でリンク先のURLを指定し、shape属性でクリッカブルマップの形状をcoords属性でクリッカブルマップにする座標が指定できます。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/">
</map>alt属性でリンクのテキストを記述することができます。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" alt="リンク先" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/" alt="ホーム">
</map>target属性でリンクを開くウィンドウを指定することができます。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" target="_blank" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/">
</map>download属性を指定することでリンクがファイルのダウンロードを示す場合、そのファイル名を指定できる属性です。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" download="ロゴ画像" coords="0,0,250,250" href="logo.png">
</map>rel属性では参照するリソースのタイプを指定できます。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/" rel="bookmark">
</map>hreflang属性
hreflang属性でリンク先の言語を指定することができます。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/" hreflang="ja">
</map>type属性
type属性を指定することでリンク先のMIMEタイプが指定できます。
<object data="http://www.webcreativepark.net/sample/images/2013-12-05%2013.22.31.jpg" width="500" height="500" usemap="#sample"></object>
<map name="sample">
<area shape="rect" coords="0,0,250,250" href="http://www.webcreativepark.net/sample/" type="text/html">
</map>参考URL
登録日 : 2014年03月06日 最終更新日 : 2014年5月2日