イメージマップのサンプル

TOP > HTMLサンプル集（画像に関するタグのサンプル集） > イメージマップのサンプル

このサンプルでは、クリック可能な領域と共に、画像を使ったイメージマップを作成する方法をデモンストレーションします。

※このサンプルは、javascriptがONになっていないと動作しません

HTMLサンプル編集フィールド
HTMLソースコードをあなた自身で編集することができます。
<html> <body> <p> それぞれの惑星がクリックできます。 </p> <img src="planets.gif" width="145" height="126" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="太陽" href="sun.html"> <area shape="circle" coords="90,58,3" alt="水星" href="mercur.html"> <area shape="circle" coords="124,58,8" alt="金星" href="venus.html"> </map> <p> Netscape Navigatorのいくつかのバージョンがid属性をサポートしないので、<map>タグ中にid属性およびname属性の両方を使用しています。 </p> </body> </html>

HTMLリアルタイム表示結果
編集されたHTMLソースコードの結果をリアルタイムで表示します。