NO.12 画像を座標指定でリンク
厄介です。画像の中の指定された領域でリンクする方法です。
実行には
<map>,<area>タグ
を使います。
座標で領域を指定するので、一つの画像に
複数のリンク
を貼る事も可能です。
これは企業のページでよく使われてますね。
・四角形で座標指定
shape属性
を
rect
にします。
coods
には座標の数字を入れます。
指定方法は、"
左上のX座標
,
左上のY座標
,
右下のX座標
,
右下のY座標
"で四角形を作ります。
<img src="temp/iruka.png"usemap="#shikaku"border=0>口の部分をクリック汁 <map name="shikaku"> <area href="index.html"shape="rect"coords="3,29,30,39"> </map>
口の部分をクリック汁
・円で座標指定
shape属性
を
circle
にします。
座標の指定方法は、"
中心のX座標
,
中心のY座標
,
半径
"で円を作ります。
<img src="temp/iruka.png"usemap="#en"border=0>目をクリック <map name="en"> <area href="index.html"shape="circle"coords="37,33,5"> </map>
目をクリック
・多角形で座標指定
shape属性
を
poly
にします。
座標の指定方法は、"
α頂点のX座標
,
α頂点のY座標
,
β頂点のX座標
,
β頂点のY座標
,
γ頂点のX座標
,
γ頂点のY座標
・・・"みたいに、
好きなだけ頂点を指定して多角形を作ります。
言うまでも無い事ですが、頂点が３未満では図形は描けませんよｗ
<img src="temp/iruka.png"usemap="#many"border=0>イルカの上半身で座標指定 <map name="many"> <area href="index.html"shape="poly"coords="2,30,18,28,28,17,41,18,49,11,56,11,56,20,60,35,40,50"> </map>
イルカの上半身で座標指定
・複数設置
同じ画像内に二つ以上置く時は、mapの中のareaタグを増やすだけで十分です。
<img src="temp/iruka.png"usemap="#two"border=0>目と口両方指定 <map name="two"> <area href="index.html"shape="rect"coords="3,29,30,39"> <area href="index.html"shape="circle"coords="37,33,5"> </map>
目と口両方指定
前に戻る
次に進む
SEO
掲示板
[PR]
爆速!無料ブログ
無料ホームページ開設
無料ライブ放送
口の部分をクリック汁
目をクリック
イルカの上半身で座標指定
目と口両方指定
