Homepage Zero ガイド
logo

ゼロから始めよう!わかりやすい!ホームページ作成ガイド

初めての方へ|総合案内|お問い合わせ|当サイトについて

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

ホームHTMLリファレンス(アルファベット検索)><map>タグ

HTMLタグ辞典
タグ一覧(ABC順) 目的別タグ一覧 スタイルシート一覧(ABC順) 目的別スタイルシート一覧

<map>…イメージマップを作成する

使用タグ

HTMLタグ

<map 属性="属性値">〜</map>

開始タグと
終了タグ

両方必須

内容となる
要素

area要素または
ブロック要素

対応ブラウザ IE6 WinFireFox WinSafariFireFox MacIE5 macOpera

解説

<map>タグインライン要素でこれを使えば、クライアントサイドイメージマップ(画像に複数のリンクを設定すること)を作成することができます。<map>〜</map>内には<area>を並べます。
読み込む画像を指定するには<img>を使い、<map>にイメージマップの名前をつけます。<img>にこのイメージマップ名を指定すると、<img>で指定した画像がイメージマップになります。

属性と働き

属性 働き 指定できる値
name="イメージマップ名" イメージマップの名前を指定できます イメージマップ名

使用例

記述例
<img src="image/map.gif" alt="イメージマップ" usemap="#map" border=0 width=300 height=100>
<map name="map">
<area shape="rect" coords="10,10,90,90" alt="四角形" href="http://hpzeroguide.web.fc2.com/">
<area shape="circle" coords="150,50,40" alt="円形" href="http://hpzeroguide.web.fc2.com/">
<area shape="poly" coords="200,30290,10,270,90,210,50" alt="多角形" href="http://hpzeroguide.web.fc2.com/">
</map>
↓
[ブラウザでの表示例]
ブラウザ
イメージマップ 四角形 円形 多角形

関連情報ページ

ページトップへ

ホームページ初心者ガイド| HTML| CSS| ホームページお役立ち情報| ホームページレベルアップ情報| その他

<TOP>

logo
ゼロから始めよう!わかりやすい!ホームページ作成ガイド

|初めての方へ|総合案内|お問い合わせ|当サイトについて|

copyright (C) TOMIY All Right Reserved
inserted by FC2 system