htmlで脱出ゲームを作る

〜画像内の1部分からリンクを張る方法〜


下の画像の水色と緑色の部分にリンクを指定してあります。

sam1.jpg

画像内の特定の位置をクリックするとそれぞれ別の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=""には代替テキストを指定します。


座標はペイントなどの画像ソフトでカーソルを合わせると読み取る事が出来ます。

Client Side Image Map Editor おすすめフリーソフト

RECTかCIRCを選んだ後、画像上に表示されるカーソルを広げて領域を指定すると座標を含めたタグが作られます。

sample2.jpg 四角形 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つの数字が中心の座標、右の数字が半径です。

多角形は各頂点の座標を並べた物になります。

堕ち武者TOP 作り方メニュー