WEBデザイナーズNEXT

Webデザイナー

慣れれば簡単!map要素を使って自由な場所にリンクを貼る

カテゴリー:HTML
Pocket

イメージマップを作る

map要素というものを使った事があるでしょうか?
私は10年以上Web製作に携わってきたのですが、今まででも1回か2回しか使用した事がありません…。
それくらいほとんど使わないと言ってもいいんじゃないかと思います。

イメージマップを使って画像内に複数リンクを設置する…なんて今時流行らないんですよね…。
でも、良い機会だからmap要素の使い方についてまとめてみました。

スポンサードリンク

マップタグを使って、四角いBOX全体をリンクにする

まずは四角いBOX全体をリンクにしてみます。

リンクを生成する

 


このように指定すると、黒い部分も赤い部分もリンクが張られます。
※なんとなくヤフーさんのサイトにリンクを張ってみました。

赤い部分はクリックできないようにする

ここがミソというか力技という感じがしてあんまり好きじゃないポイントなのですが、
先ほど指定した領域の上に赤い領域を乗せてクリックできなくする感じです。

ソースにするとこんな感じですね。


なんというか強引な…って感じです。

そこで気になるのはどうやって領域を調べるかという事です。
mapタグを使うなんていう人はある程度Web製作に精通していると(勝手に)思っているので、
PhotoShop(フォトショップ)を持っているという前提で進めさせて頂きます。

フォトショップで座標を取得する

さっそく赤いボックスの座標をとってみたいと思います。
まずはフォトショップの中にmapタグで使用する画像を入れてみてください。

右上に情報パネルがない場合は、
[上部メニュー]→[ウィンドウ]→[情報]で出す事ができます。

まずは赤いボックスの左上の座標をとります。マウスを赤いボックスの左上に持っていってください。
座標をとる1
x,y(16,16)になっていますよね。

次に赤いボックスの右下の座標をとります。
座標をとる2
x,y(53,53)になっている事がわかると思います。

たったこれだけなんです。さきほどのコードを見てみましょう。


もっとわかりやすくすると、


①=左上のx座標
②=左上のy座標
③=右下のx座標
④=右下のy座標

このような感じで入れればOKです。

慣れれば簡単!map要素を使って自由な場所にリンクを貼る まとめ

すごく簡単じゃないですか?考え方としては以下のようになります。

座標をとる考え方

mapタグかよ~面倒くせぇぇ~!って思う人も多いかもしれませんが、Photoshopと組み合わせる事によって、とてつもなく簡単にできてしまうんです。

スポンサードリンク

Pocket

カテゴリー:HTML
WEBデザイナーズNEXT TOP