
スキルアップ
2021.04.15
社会人におすすめなプログラミングスクールの条件とは?目的別25校と選び方
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
ITコラム
2017.03.09
イメージマップとは、1つの画像内に複数のリンク先を設定できる機能のことです。img要素とmap要素、area要素の3つの要素を組み合わせることで、イメージマップを設定することができます。
今回は、イメージマップの作り方についてまとめたいと思います。
1.イメージマップとは
2.イメージマップの作成
3.座標の指定方法
4.area要素の属性一覧
イメージマップとは、1つの画像上にリンク領域が複数あるもののことです。
画像を組み込んだ後に、各リンク領域を作っていきます。
img要素を使って画像を表示させ、map要素とarea要素を使ってイメージマップを作成します。
使用する要素
●<img>
●<map> ~ </map>
●<area>
map要素の属性 name属性 イメージマップの名前 グローバル属性 id属性、class属性、title属性、style属性など area要素の属性 href属性 リンク先のURL alt属性 代替テキスト shape属性 領域の形状(四角、円、多角形、画像全体) coords属性 領域の座標を画像の左上を0としてピクセルで指定 ping属性 ping送信するURL(半角スペース区切りで複数可) rel属性 リンク先との関係を示すキーワード media属性 リンク先の対象メディアタイプ target属性 リンク先を表示するウィンドウ名またはキーワード hreflang属性 リンク先の言語コード(ja、enなど) type属性 リンク先のMIMEタイプ グローバル属性 id属性、class属性、title属性、style属性など img要素の属性 usemap属性 map要素のイメージマップ名を呼び出す
次の画像内の3つの図形にロールオーバーすると、カーソルが変化して、リンク領域であることがわかります。
上の表示に対するhtmlコードは、以下の通りです。
<img src=”photo.jpg” width=”525″ height=”150″ usemap=”#shapes” />
<map name=”shapes”>
<area shape=”circle” coords=”107,75,55″ href=”#” alt=”円” />
<area shape=”poly” coords=”209,132,262,20,314,132″ href=”#” alt=”三角形” />
<area shape=”rect” coords=”371,28,463,123″ href=”#” alt=”四角形” />
</map>
イメージマップは、以下の手順で作成します。
・イメージマップに使用する画像を用意して、それをimg要素で読み込みます。
・map要素のname属性で、任意のマップ名(半角英数字)を指定します。
・img要素のusemap属性で、map要素で指定したマップ名をハッシュ( # )に続けて記述します。(この指定によって、画像とイメージマップの設定が関連付けられます。)
・map要素の中に、必要な数だけarea要素を設置します。
・各area要素に、shape属性(リンク領域の形状)、coords属性(リンク領域の座標)、href属性(リンク先のURI)、alt属性(代替テキスト)の指定を行います。
area要素のcoords属性で、リンク領域の座標を指定します。
この指定は、イメージマップ特有の重要な指定です。
リンク領域の形状により、座標の指定方法は異なります。
リンク領域の形状はshape属性で指定します。
座標はcoords=”数値,数値,数値…”のように、数値をカンマ(,)で区切って指定します。
座標は、画像の左上が0(x=0, y=0)となります。
●四角形の指定
四角形は「shape=”rect”」で指定します。
座標は「(左上のx座標),(左上のy座標),(右下のx座標),(右下のy座標)」の順に指定します。
上の例では、四角形の左上の角が x=371、y=28で、右下の角は x=463、y=123となったので、「coords=”371,28,463,123″」と指定しています。
●円の指定
円は「shape=”circle”」で指定します。
座標は「(中心点のx座標),(中心点のy座標),(半径)」の順に指定します。
上の例では、中心点は x=107、y=75で、半径=55となったので、「coords=”107,75,55″」と指定しています。
●多角形の指定
四角形と正円以外は多角形となります。
多角形は「shape=”poly”」で指定します。
座標は「(角のx座標),(角のy座標)」の順で、全部の角を指定していきます。
角の座標を書く順番は、時計回りでも半時計回りでも、どこから始めても大丈夫です。
上の三角形の例では、左の角から時計回りに角を指定しており、「coords=”209,132,262,20,314,132″」となりました。
●defaultの指定
上の例にはありませんが「shape=”default”」と指定すると、画像全体がリンク領域となります。
個別のリンク領域と「shape=”default”」を併用すると、各形状のリンク領域と共に、それ以外の領域(背景)のリンク領域も作ることができます。
座標は、画像編集ソフト等で割り出すことができます。
ここでは、Windowsのペイントで座標を調べてみます。
以下は、ペイントを使用したときの例です。調べたい位置にカーソルを合わせると、右下にその位置の座標が表示されます。
三角形の一番上の点にカーソルを合わせた際に、左下に座標(x,y)が「262,20px」と表示されました。
area要素の属性は、次の通りです。
href=”URL” |
---|
リンク先のURLを指定します。 |
alt=”代替テキスト” |
代替のテキストを指定します。 |
shape=”rect” または ”circle” または ”poly” または ”default” |
リンク領域の形状を指定します。 rect は四角形、circle は円、poly は多角形、default は、画像全体(rect, circle, polyなどで指定した領域以外の場所) |
coords=”リンク領域の座標(画像の左上を(0,0)としてピクセルで指定)” |
リンク領域の座標を指定します。
rect の場合、四角形の(左上のx, 左上のy, 右下のx, 右下のy) |
ping=”pingを送信するURL” |
ping(ピン)を送信するpingサーバ(pingサイト)のURLを指定します。 半角スペースで区切ると複数のURLを指定することができます。 |
rel=”関係を示すキーワード” |
このHTML文書とリンク先ファイルの関係(relation)を示すキーワードを指定します。
rel属性のキーワード |
media=”リンク先を表示する時のメディアタイプ” |
リンク先を表示する時のメディアタイプ(機器)を指定します。 初期値は all。 カンマ(,)で区切って複数指定することができます。 メディアタイプ |
target=”_blank” または ”_self” または ”_parent” または ”_top” または ”フレーム名” |
リンク先ファイルを表示するウィンドウ(またはフレーム)を指定します。
_blank :新規の(別の)ウィンドウに表示 |
hreflang=”言語コード” |
リンク先ファイルの言語コードを指定します。 ja(日本語)、en(英語)、es(スペイン語)、fr(フランス語)、ko(韓国語)、zh(中国語)など |
type=”MIMEタイプ” |
リンク先ファイルのMIMEタイプを指定します。 text/html(HTML)、application/pdf(PDF)など |
この他に、id属性、class属性、title属性、style属性などのグローバル属性も使います。
スキルアップ
2021.04.15
突然ですが、社会人に最適なプログラミングスクールの条件とは何かをご存じですか?本記事では「未経験からIT業界に就職したい」「今の職場でスキルアップしてから転職したい」という20代~30代に向けて、元エンジニアがおすすめの […]
スキルアップ
2021.04.15
Webディレクターとは、Webサイト制作や、企画、運用の現場においてリーダーの役割を担う職種です。多くの業務をこなすため大変な仕事ではありますが、その分やりがいや魅力もある仕事です。本記事では、Webディレクターの具体的 […]
スキルアップ
2021.04.14
IT業界やエンジニアという職種に対してなんとなくイメージは持っているものの、具体的にどんな仕事をしているのか詳しく知らないという方もいらっしゃるでしょう。本記事では、IT業界とはどんな業界なのかをわかりやすく解説。各業種 […]
スキルアップ
2021.04.02
IT業界未経験からITエンジニアへ転職しようとするとき、強い味方になってくれるのが資格です。IT系の資格試験には数多くの種類があり、取得することでスキルの証明が可能。本記事では、未経験者が就職を有利にするためのおすすめ資 […]
スキルアップ
2021.04.01
「プログラミングができると就活が余裕らしいけど、大学生のうちにプログラミングを学ぶメリットって何?」と考えている方に向けて、本記事では元エンジニアである筆者がこれまでの経験則をもとに、在学中にプログラミングを学習するメリ […]
スキルアップ
2021.04.01
【2021年最新】いざJava SE 11のBronze資格にチャレンジしようと思っても「申込方法が複雑すぎて難しい…」と困っている方も多いのでは?本記事では、2020年に新しくなったOracle認定Javaプログラマ試 […]
INTERNOUS,inc. All rights reserved.