September 05

イメージマップ

1枚の画像に複数のリンクを設定する方法

catmap01.jpg


Mac
GIMP
freeware
 この画像の白い部分にリンクが設定されてます
 クリックすると各カテゴリが表示されます
 ニコニコマークはフリーソフトのページです 



設定の方法は画像の左上を0としてX座標(横)Y座標(縦)を<AREA>タグにCOORDSの属性値で指定します

catmap03.jpg範囲を指定する方法はその画像の形によって 
rect(四角形)は左上、右下の順に指定
poly(多角形)は左上から反時計回りにすべての頂点を指定
circle(円)は円の中心、半径を指定
以上の3種類です 
便宜上大雑把にとってますが

多角形などの場合は「GIMP」だとクリックしていくだけで座標がとれて
面倒なソースも書いてくれますのでリンク先のURLを指定するだけで後はコピー&ペーストで作成できます



具体的に上のマップのソースは

<img src="ファイルの場所" width="198" height="188" border="0" alt="catmap01.jpg" usemap="#catmap">
<map name="catmap">
<area shape="rect" coords="12,140,42,170" alt="Mac" href="カテゴリMacのURL">
<area shape="poly" coords="50,147,67,170,84,147" alt="GIMP" href="カテゴリGIMPのURL" >
<area shape="circle" coords="111,155,11" alt="freeware" href="カテゴリフリーソフトのURL">
</map>

となります


訂正
上のX座標80は84の間違いです

「GIMP MANUAL」イメージマップ作成方法
posted by nei at 08:34 | Comment(2) | HTML&CSS
comment
そうかぁ、こんなことも出来るんですね.....
今度何かの機会に早速使わせて頂きます。
Posted by Mathasar at September 06* 08:22
また面白いのがあれば載せていきます
Posted by nei at September 08* 05:00
Retweet!
×

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