このページについて
このページではHTMLで使えるcoords属性を使って画像マップ内の領域を定義する方法を解説しています。
coords属性
coordsはareaタグで使う事ができる属性です。現在、areaタグ以外では使う事ができません。
そんなcoordsですが、書き方自体は3パターンあります。そしてこれは同じくareaタグで使える、shape属性と密接な関係を持っているのでそのあたりまとめて解説していきます。
まずshape属性は「クリック可能な範囲の形」を指定します。次に今回解説するcoordsは「クリック可能な範囲を座標で指定」する機能を持ちます。つまり「形」の定義と、「その形を置く場所」の定義はそれぞれで行うことになっています。
shape属性の詳しい解説はそちらをみていただくとして、簡単に書くと四角形を指定するrectと、円形を指定するcircleと、多角形を指定するpolyの3種と画像全体を指定するdefaultの全4種類から選んで使います。
そしてその形状をどこに配置するかを指定するのがcoordsの役割となります。
座標に関して覚えておくと良いこと
coordsに限らずですが、コンピュータの世界では左上が開始地点として扱われています。つまり左上の座標は0,0です。そこから「右方向にいくつ進んだ地点」のことをx、「下にいくつ進んだ地点」のことをyと言います。座標を書くときはx,yの順番で書くので、横,縦という順番を覚えておくと良いと思います。
rectでの座標指定
shapeでrectを選んだ場合の配置の考え方はこんな感じになります。
rectの場合、点Aと点Bの座標をそれぞれ指定することでその2点から四角形を作ります。画像で言うと水色の範囲になりますね。この場合の座標の書き方はと言うと
<area shape="rect" coords="10,5,15,20">となります。10と5が点Aのx,yの座標を示していて、15と20が点Bのx,y座標を示しています。
circleでの座標指定
circleで座標指定する場合、点Aと半径を指定することになります。点Aは円の中心を指定することになります。
左上が常に0,0なので、この場合は中心である点Aはx10、y12の地点にあります。そして円の半径が5なので、この場合の書き方は以下のようになります。
<area shape="circle" coords="12,10,5">rectに比べれば指定する数字が少ないように見えますが、円は常に一定の大きさになります。細かい制御がしにくいという点ではこちらの方がより制御がしにくいと言えます。
polyでの座標指定
polyは多角形を扱う時に指定するものになります。これはrectと同じ感じで考えれば良いんですが、如何せんめんどくさいの一言に尽きます。
rectの場合は「左上の点」と「右上の点」の2点のみを書くだけで、あとは自動で四角形が出来上がっていました。しかしpolyの場合は、「始点」と「終点」をそれぞれ細かく書いていく必要があります。
簡単な例で説明しますと、以下のようになります。
この星の場合、Aの一辺を指定するために始点と終点がそれぞれ必要になります。そのためこの星を完成させるには10の辺の始点と終点をそれぞれ書く必要があるため、20の座標を書く必要があることになります。以下は点Aの座標のみ書いてありますが、それ以降に続けて辺Bの始点,辺Bの終点を書けばOKです。
<area shape="poly" coords="20,5,25,15....>polyの時に使うcoordsはこのように書く量がかなり多いのが特徴です。その分どんな形にも対応できるので、根気のある方はこれでかなり細かく指定するのも良いと思います。
まとめ
coordsは座標を指定することでshapeの場所を指定する事ができます。areaタグでしか使えませんが、使う時にはこのように細かく指定する必要があります。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。