| |
htmlで脱出ゲームを作る 〜画像内の1部分からリンクを張る方法〜
下の画像の水色と緑色の部分にリンクを指定してあります。
画像内の特定の位置をクリックするとそれぞれ別のhtmlへ移動するようにするには
画像のタグを次のように記述します。
<img src="sample1.jpg"
alt="sam1.jpg" border="0"
width="400" height="300"
usemap="#sample1">
<map name="sample1">
<area shape="rect"
coords="0,0,16,269"
href="tu1-2.htm" alt="">
<area shape="rect"
coords="384,0,402,273"
href="tu1-4.htm" alt="">
</map> |
usemap=""で#の後にマップ名を指定します。(半角英数)
<map
name="">に先程つけたマップ名を入れます。
area shape="rect"というのは四角形の領域にクリックポイントを指定するということです。rect(四角形)の他にcircle(円)、poly(多角形)があります。
coords=""に座標を指定します。
href=""にURL、alt=""には代替テキストを指定します。
座標はペイントなどの画像ソフトでカーソルを合わせると読み取る事が出来ます。
 |
四角形 area
shape="rect"
coords="112,22,177,62" |
| 円 area
shape="circle"
coords="144,109,25" |
| 多角形 area
shape="poly"
coords="50,27,77,92,12,69,39,58" |
四角形は左上の頂点の座標と右下の頂点の座標です。
円は左2つの数字が中心の座標、右の数字が半径です。
多角形は各頂点の座標を並べた物になります。
|
|