このページについて
このページではHTMLで使う事ができるshape属性を使って画像マップ内の領域の形状を指定する方法を解説しています。
shape属性
shapeはareaタグの中で使う事ができます。areaタグは「画像の指定した範囲をクリック可能にする」機能を持ち、shapeは「クリック可能な形状」を指定する属性となります。同時に使う必須属性としてcoords属性というものがありますが、coords属性は「クリック可能な形を配置するための座標」を扱う属性となります。
つまりはこのshpaeで形を指定するのと、coordsで決めた形を配置するのはセットで使われると言うことになります。基本的な書き方は以下の通りです。
<area shape="形状" coords="座標">座標の指定方法に関してはcoords属性の解説ページを見てください。
shapeの形状に関しては以下の4種類から選びます。
| default | 領域ではなく、画像全体を指定 |
|---|---|
| rect | 四角形を指定 |
| circle | 円形を指定 |
| poly | 多角形を指定 |
一番最初のdefaultに関してはもはや説明不要ですね。その画像全体をクリック可能にします。この場合のみ、coords属性は不要です。
rectは四角形を指定します。coords属性で指定する際には左上の角と、右下の角の2点を指定します。その対角線から四角形を形成してくれます。
<area shape="rect" coords="左上の角のx,左上の角のy軸,右下の角のx,右下の角のy>circleは円形を指定します。coords属性で指定する際には円の中心と、その円の半径の2つを指定します。
<area shape="circle" coords="円の中心点のx,円の中心点のy,円の半径">polyは多角形と書きましたが、これは正確には辺1本を書く時に使います。そして中に入れる座標は何個でもOKなので、それで器用に図形を書こうというものです。
<area shape="poly" coords="辺1のx,辺1のy,辺2のx,辺2のy....>まとめ
shape自体は形状を指定するだけで良いため簡単に扱えますが、セットで使うcoords属性は慣れないと若干難しいかなって印象です。しかし理解してしまえばかなり複雑なpolyでもできてしまいます。
- HTMLの基礎
- HTMLってどんな言語？書き方やHTMLファイルの作成方法などを解説。
- HTMLタグで押さえておきたいポイント3選
- HTMLタグを使う上で必ず押さえておいてほしいポイント3つの解説です。
- HTMLタグと属性一覧
- HTMLタグと属性の一覧です。
- tableタグ生成ページ
- tableタグの基本形を生成できるページです。
- ulタグ・olタグ生成ページ
- ulタグとolタグの基本形を生成できるページです。