画像の中にリンクを埋め込む

Posted by muchag | HTML |
初回投稿:2011-07-09 (土) 11:00:28 | 最終更新:2012-01-02 (月) 15:25:34

画像の中にリンクを埋め込む手法。

概要

img タグ、map タグ、area タグの3つを組み合わせる。

img タグで画像を配置し
map タグで設定を宣言し
area タグで詳細設定を行う。
 

img

一般の img タグとの相違点は
usemap 属性。

  1. <img id="sample" src="hoge.png" usemap="#mapname" />

usemap 属性に後続の map タグの name 属性値を設定。

ページ内リンクのときと似ている。
 

map

map タグは、設定を宣言する感じ。

よって、name 属性のみで実現可能。

  1. <map name="mapname">
  2.     <area ・・・ />
  3.     <area ・・・ />
  4. </map>

「mapname」は任意。
 

area

リンクを貼りたい 形状領域リンク先 を指定する。
 

形状
shape
内容 指定方法
coords
rect 長方形 (x,y,x,y)
指定した2点の座標を対角線とする長方形
circle (x,y,r)
中心の座標と半径を指定
poly 多角形
凹凸共に可能
(x,y,x,y,・・・)
全ての頂点の座標を指定

 

形状

shape 属性。
 

  1. <area shape="rect" />
  2. <area shape="circle" />
  3. <area shape="poly" />

 

領域

coords 属性。
 

  1. <area shape="rect" coords="10,15,210,185" />
  2. <area shape="circle" coords="100,75,30" />
  3. <area shape="poly" coords="30,50,10,85,70,65" />

 

リンク

href 属性。
 

  1. <area shape="rect" coords="10,15,210,185" href="hoge.html" />
  2. <area shape="circle" coords="100,75,30" href="hoge.html" />
  3. <area shape="poly" coords="30,50,10,85,70,65" href="hoge.html" />

 

マウスイベント

onclick 属性。
onmouseover 属性。
onmouseout 属性。
onmousedown 属性。
onmouseup 属性。
 

  1. <area shape="rect" coords="10,15,210,185" href="hoge.html" onclick="sample.src='click.png'" />
  2. <area shape="circle" coords="100,75,30" href="hoge.html" onmouseover="sample.src='mouseover.png'" />
  3. <area shape="poly" coords="30,50,10,85,70,65" href="hoge.html" onmouseout="sample.src='mouseout.png'" />

 

参考元サイト

TAG index:画像内に複数リンクを設定する
eWeb:マップ

Posted by muchag | HTML |
初回投稿:2011-07-09 (土) 11:00:28 | 最終更新:2012-01-02 (月) 15:25:34

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a comment