トリッキーコードネット トップへ戻る   C/C++, Java, Perl, PHP, JavaScript, アルゴリズム, ショートコーディング, IOCCCコードの解説, 等々

サイト情報

トリッキーなコード

7行プログラミング

物凄いコード集

アルゴリズム

データ構造

C/C++な話題

コードサンプル

ツール/環境構築

開発ノウハウ 等

ネタ/ジョーク集

おススメ書籍/サイト

サイトTOP >> コードサンプル >> イメージマップ

画像の任意の場所にリンクをはる方法[イメージマップ] (HTML/CSS)

画像の任意の場所にリンクをはる方法(イメージマップ)について記述してあります。

まず、以下のコードでは、画像のどこをクリックしても、同一の処理(この場合、アラートで「Demo」と表示)が実行されます。
<a href="#" onclick="alert('Demo'); return false;" alt="Demo"  title="Demo">
<img src="./img/test.gif" border="0" />
</a>



しかし、以下の様なイメージマップを使用することで、同一の画像でも、クリック場所によって、その後の動作を切り分けることができます。
<img src="./img/test.gif" alt="Demo" title="Demo" usemap="#demoMap" border="0" />
<map name="demoMap">
    <area nohref alt="" title="" shape="circle" coords="104, 107, 42" />
    <area href="#" onclick="alert('Green'); return false;" alt="green" title="green" shape="poly" coords="103,15, 192,79, 160,186, 47,186, 14,79" />
    <area href="#" onclick="alert('Red'); return false;" alt="red" title="red" shape="poly" coords="224,32, 287,32, 287,8, 354,57, 287,105, 287,83, 224, 83" />
    <area href="#" onclick="alert('Yellow'); return false;" alt="yellow" title="yellow" shape="rect" coords="219,139, 370,212" />
</map>
Demo
greenredyellow

緑、赤、黄色部分にリンクが張ってあり、カーソルを当てると、ツールチップでそれぞれの色名が表示されます。
そして、クリックすると、それぞれの色名がアラートで表示されます。

(緑五角形の内側にある円部分は、何も反応しないのがちょっぴり面白いかもです^^;)



それでは、説明~。

まず、イメージマップに使う画像を宣言します。
<img src="画像パス" alt="代価テキスト" usemap="#マップ名" />

そして、座標と処理の一覧を、
<map name="マップ名"> ~ </map> の間に記述します。
(※ map要素のname属性値と、img要素のusemap属性値を等しくすることで、map要素とimg要素が紐付けされます (*゚∀゚)=3)

map要素内には、
<area href="リンク先" alt="代価テキスト" shape="リンク領域" coords="座標データ" />
を、リンク領域の数だけ記述していきます。
(area要素の中には、a要素同様、javascript処理の onlick="xxx" なんかも記述できます)

shape : リンク領域の形

rect - 四角形(デフォルト) circle - 円 poly - 多角形 default - 画像中、リンクが指定されていない領域(ブラウザによっては動作しないものもあるんだとか・・・)

coords : リンク領域の座標(px)

shapeがrect - 領域の左上座標と右上座標 (x,y,x,y) shapeがcircle - 領域の中心点座標と半径 (x,y,r) shapeがpoly - すべての頂点座標 (x,y,x,y,...) shapeがdefault - 指定不可 ※ 指定領域にリンクを指定しない場合は、hrefではなくnohrefを指定します。 ※ area要素で指定した領域が重なっている場合は、先に指定した領域が優先される模様。(ex 冒頭の緑五角形内の円部分) その為、shape - defaultは一番最後に指定する。
         このエントリーをはてなブックマークに追加   


作業効率化・ライフハックのオススメ記事




コンピュータ・テクノロジーのオススメ記事





恋愛・人間関係のオススメ記事




※ 当サイトは、トップページからリンクで辿る事の出来るページに限り、リンクフリーです。
※ 当サイトの閲覧/利用によって生じた如何なる損害も、当サイト管理人は責任を負いません。
※ 当サイトの内容を転載される場合は、当サイトへのリンクをお願い致します。