画像とリンクの複合技

 画像をリンクの対象にする場合は、その画像をA要素で囲ってやりましょう。一般的なブラウザでこれをやると画像の周囲に枠線ができてしまうので、それを消したい場合はborder="0"をお忘れなく(まあ、表示されてもいいや、という方はborder="0"をつけなくていいんですけど……。

 なお、IMG要素のalt属性には、リンク先の内容が分かるような代替テキストを付けるようにしましょう。

<IMG src="(URL)" alt="代替テキスト" usemap="#マップ名">
<MAP name="マップ名">
 <AREA shape="( circle | rect | poly | default )" coords="座標"href="(URL)" alt="代替テキスト">
・・・・・・
</MAP>

 イメージマップとかクリッカブルマップと呼ばれる、一つの画像の中でクリックする場所によって別なページに飛べるようなリンク画像を作る要素です。恐らくこの講座の中で最難関です、これ……。こんなん私だって作ったことないし。

マップの座標指定。中心(a,b)、半径cの円ならcoords="a,b,c" 左上(a,b)で右下(c,d)の長方形ならcoords="a,b,c,d" 3頂点が(a,b)(c,d)(e,f)の三角形ならcoords="a,b,c,d,e,f,a,b"となる。
 各々の画像全体の左上の角を(0,0)とした座標で、図形の位置や形を規定していきます。単位はピクセルです。座標数については……画像を作るときにもちもちと数えてください(^^;
形が円(circle)の場合は、(中心のX座標),(中心のY座標),(半径)の3つ、長方形(rect)の場合は(左上X座標),(左上Y座標),(右下X座標),(右下Y座標)の順に指定していきます。多角形の場合は、どこでもいいから(頂点のX座標),(頂点のY座標)を1箇所指定したあと、反時計回りにすべての頂点の座標をX,Yの順で半角カンマで区切って指定していき、最後にはじめの頂点の座標を指定すれば出来上がりです。