HTML ismap機能 - IT生活向上ブログ

HTML ismap機能

クライアントISMAP機能を実現します。ISMAPは画像のクリックする位置で、リンク先を替える機能で、ずいぶん昔からある機能です。
機能とすれば、いささか枯れたものですが、私はまだまだ使える機能だと思ってます。
<img src="画像ファイル名" 
usemap="#マッピング名"
longdesc="url">

まずusemapにより画像にマッピング名を定義します。longdescはラインモードブラウザ等のために説明用の飛び先を定義します。longdescを指定する場合はaltもあわせて指定するのが良い。

<map 
name="マッピング名">・・・</map>

次にマップの定義をmapタグ内に記述します。

<area shape="メソッド" href="URL" 
coodrs="位置" target="ウィンドウ名">

マップを定義する。飛び先を無しにしたい時は、nohref を指定する。

・メソッド、位置
shape="circ" coords="位置1,半径"
位置1を中心とした円のURLを設定する。 shape="circle"でも同じ。

shape="rect" coords="位置1,位置2"
 位置1と位置2を対角とした長方形のURLを設定する。
位置1は、左上 位置2は、右下になる。 shape="rectangle"でも同じ。

shape="poly" coords="位置1,・・位置n"
 位置1〜位置nまでを頂点とした多角形のURLを設定する。 shape="polygon"でも同じ。

・target
targetを指定した場合、指定ウィンドウへリンクする。


サンプル
<img src="/image/ismap.gif" 
usemap="#html-ismap-map">
<map name="html-ismap-map">
<area shape="circle" href="javascript:alert('赤');" coords="30,30,30">
<area shape="circle" href="javascript:alert('青');" coords="90,30,30">
<area shape="circle" href="javascript:alert('黄');" coords="30,90,30">
<area shape="circle" href="javascript:alert('緑');" coords="90,90,30">
<area shape="rect" href="javascript:alert('黒');" coords="0,0,120,120">
</map>

  ↓  の様にすると

 こうなる。
※MAP定義は領域が重複した場合、上の定義が優先されるため、一番最後の行に画像全体を定義すれば default と同じ働きをします。


カテゴリ:HTML・CSS
タグ:HTML

PR:
手数料無料、スプレッドは1銭から、レバレッジ400倍選択可能、「みんなのFX」
芸能人もびっくり!即効ダイエットなら骨盤ウォーカーベルト
【業界初】保有ポジションのレバレッジ変更機能

人気ブログランキング あとで読む
posted by wing at 2009/02/21 20:40 | Comment(0) | TrackBack(0) | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。