画像の一部にリンクする「イメージマップ」

2015092201.jpg←このサンプルのように、通常画像をリンクさせるときは、画像全体(画像1枚)に対して別のサイトや大きな画像にリンクしている場合が多いですが、今回は画像の一部をクリックすると別画像や別リンクへ飛んだりする方法を書いてみたいと思います。


↓この画像では黄色の矢印と赤色の矢印の部分しかクリックすることができません。


20150922032015092202

使い方の説明です。

<img src="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092204.jpg" width="450" height="300" border="0" usemap="#Map"/>
<map name="Map">
<area shape="rect" coords="237,95,270,135" href="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092203.jpg" alt="2015092203" />
<area shape="circle" coords="359,128,24" href="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092202.jpg" alt="2015092202"/>
</map>

●1行目
<img src="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092204.jpg" width="450" height="300" border="0" usemap="#Map"/>
赤字部分「img scr="…"」は表示の画像のURLと表示サイズなどです。
青字部分の「usemap="#…」はmap名で、#以下は任意のIDにします。

●2行目
<map name="Map">の青字部分は先ほどつけたmap名でつけたIDを記入します。

●3行目
<area shape="rect" coords="237,95,274,133" href="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092203.jpg" alt="2015092203" />
<area shape="circle" coords="359,127,24" href="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092202.jpg" alt="2015092202"/>
赤字部分「area shape="…"」はリンククリックできる範囲の形です。
 ・rect 四角形
 ・circle 円形
 ・poly 多角形
青字部分「coords="…"」は範囲部分の座標や半径。
 ・rect(長方形)の場合は「四角形の左上の座標(x,y),右下の座標(x,y)」を記述。
 ・circle(円形)の場合は「円形の中心の座標(x,y),半径の長さ」を記述。
 ・poly(多角形)の場合は「多角形すべての角の座標」を記述。

*座標の出し方
「Windows」の「ペイント」を使用します。
【四角形の場合】
2015092207.jpg
黄色の矢印の周りに四角形でクリックできる範囲を作ってみます。
ペイントで四角形の左上①の座標の部分にカーソルを置くと、ペイントの左下に「237,95px」と表示されます。
この数字が「coords="237,95,274,133"」の前ふたつの数字となります。
続いて右下②の座標の部分にカーソルを置くと、「274,133px」と表示されます。
この数字が「coords="237,95,274,133"」の後ろふたつの数字となります。
それぞれの数字の間には「,」(半角カンマ)を必ず入れます。
これで「237,95,274,133」の四角形の座標の範囲でクリックできます。

【円の場合】
2015092208.jpg
赤色の矢印の周囲に円形にクリックできる範囲を作ってみます。
ペイントで円形の中心にカーソルを置くと、ペイントの左下に「359,127px」と表示されます。
この数字が「coords="159,127,24"」の前ふたつの数字となります。
続いて半径を計算します。
②の座標を確認します。
2015092210.gif
半径の長さは(y座標が同じ位置であれば)「C-A」で計算できますから、ここでは「383-359=24」となり、
この数字が「coords="159,127,24"」の3つ目の数字となります。

【多角形の場合】
2015092210.jpg
それぞれの角の座標をすべて拾い出し記述します。
<area shape="poly" coords="375,88,420,88,419,124,485,130,490,191,376,185" href="#" alt="" />

これを応用するとこんな感じで画像にリンクすることもできます。

地図上の文字をクリックしてね。

姫路城
書写山姫路セントラルパーク

大阪城
USJ

<img src="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092211.jpg" usemap="#Map1"/>
<map name="Map1">
<area shape="rect" coords="189,188,250,218" href="http://blog-imgs-80.fc2.com/s/a/k/sakuraxren/2015071516.jpg" alt="姫路城" class="thickbox" title="姫路城" target="_blank"/>
<area shape="rect" coords="165,33,217,51" href="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/shoshazan.jpg" alt="書写山" target="_blank" class="thickbox" title="書写山"/>
<area shape="rect" coords="269,93,405,109" href="http://www.central-park.co.jp/" alt="姫路セントラルパーク" target="_blank" />
</map>

<img src="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092212.jpg" usemap="#Map2"/>
<map name="Map2">
<area shape="rect" coords="329,52,385,102" href="http://blog-imgs-21-origin.fc2.com/s/a/k/sakuraxren/20080726oosakajou1.jpg" alt="大阪城" class="thickbox" title="大阪城" target="_blank"/>
<area shape="rect" coords="47,131,88,145" href="http://blog-imgs-44-origin.fc2.com/s/a/k/sakuraxren/100313039.jpg" alt="USJ" target="_blank" class="thickbox" title="ユニバーサル・スタジオ・ジャパン"/>
</map>




↓5枚セットの画像になっていますが…それぞれの写真をクリックすると1枚ずつ見ることができます。

2013040703.jpg
2015080305.jpg2015050425.jpg
2015040401.jpg2015071516.jpg"

<img src="http://blog-imgs-83.fc2.com/s/a/k/sakuraxren/2015092213.jpg" usemap="#Map3"/><map name="Map3">
<area shape="rect" coords="4,4,198,133" href="http://blog-imgs-48.fc2.com/s/a/k/sakuraxren/2013040703.jpg" alt="2013040703.jpg" class="thickbox" title="" target="_blank"/>
<area shape="rect" coords="2,134,198,264" href="http://blog-imgs-77.fc2.com/s/a/k/sakuraxren/2015080305.jpg" alt="2015080305.jpg" target="_blank" class="thickbox" title=""/>
<area shape="rect" coords="4,266,198,399" href="http://blog-imgs-76.fc2.com/s/a/k/sakuraxren/2015050425.jpg" alt="2015050425.jpg" class="thickbox" title="" target="_blank"/>
<area shape="rect" coords="202,2,400,199" href="http://blog-imgs-76.fc2.com/s/a/k/sakuraxren/2015040401.jpg" alt="2015040401.jpg" target="_blank" class="thickbox" title=""/>
<area shape="rect" coords="202,203,399,400" href="http://blog-imgs-80.fc2.com/s/a/k/sakuraxren/2015071516.jpg" alt=2015071516.jpg" target="_blank" class="thickbox" title=""/>
</map>





関連記事

コメントの投稿

**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ