先日の画像リンクの仕組みは、HTMLタグで作られている。
ずっと前からあるHTMLタグだが、あまり見かけない気がする。
HTMLの解説書には必ず、またホームページ作成の解説書にも載っているかと思う。
ただし超初心者向けの解説書には、載っていないか？
いずれにしてもネット上にも解説があるし、目新しいものではない。
しかし、リンクと言えば文字、画像、ボタンくらいと思っていた者には驚きかも知れない。
逆に、何の知識も無い者にとっては特に感じる事もなく、便利に思うくらいだろう。
ーーーーーーーーーーーーーーー

さて、本題のリンクの仕組みである。
画像にリンクを付けるには、元になる画像とリンク先の「何か」が必要になる。
「何か」とは、例えば拡大画像とかWebページであったりする。
今回のリンクも、その点はまったく同じでリンク先の「何か」が必要だ。
謎のHTMLタグが、元画像を思うままに抜き出して拡大してくれる訳ではない。

リンクを付ける画像と、リンクさせる「何か」が必要である。
ーーーーーーーーーーーーーーー

よくある普通の画像リンクは、画像全体がクリックの領域になっている。
この時のHTMLタグにクリック領域の設定項目はないので、領域に関して意識する事はない。

一方で今回の画像リンクは、画像に領域を区切って設定して複数のリンクを付けている。
このため、画像をクリックした時の領域を設定する事が必要になる。

領域の設定は、矩形、円形、多角形の三種類の指定方法がある。
パソコン系は、たいがい英語表記の省略形なので語源を知っておくと重宝する。
ーーーーーーーーーーーーーーー

実際の画像を例にして、領域の設定を考えてみる。
元の画像に方眼を重ねると下のようになり、左上隅が原点で座標(0,0)である。
領域の設定は、原点を基準にした座標をピクセル単位で指定する。
この例の画像の方眼は１マスが10ピクセルだが、指定は1ピクセル単位で可能である。



左端の細長い２枚の板の領域設定は、次のとおりである。
<area href="リンク先画像のURI" shape="rect" coords="70,20,140,160" target="_blank" alt="細長い板が２枚" />

shapeで領域の形を指定、ここでは矩形にしたのでrectを指定している。
（rectはRectangleを略した書き方だろう）

coordsで座標を指定、左上と右下の隅を原点からのピクセル数をカンマ区切りで記述する。
（coordsはcoordinateを略した書き方だろう）

方眼のマス目を数えると、左から7マスで上から２マスの点、それと左から14マスで上から16マスの点を指定している。
ここでは１マスが10ピクセルなので、それぞれのマス数を10倍して="70,20,140,160" となる。
この二つの点を対角とした四角形の範囲内が、クリック領域である。

以上のように座標を指定して、画像の任意の範囲にクリック領域を設定する事が出来る。
ーーーーーーーーーーーーーーー

クリック領域の設定方法が分かったならば、次は画像の座標を取得する方法を考えなければならない。
上例の画像のようにマス目が見えれば簡単であるが、それでもマス目を数える手間が要る。
また、マス目の数え間違いもあるかも知れない。

たいがいの画像処理ソフトには、画面のどこかに座標を示す数字が出るので利用すると良いだろう。
ーーーーーーーーーーーーーーー

ここでは、画像リンクの仕組みの中心となる事について書いた。
利用するためには、クリック領域にリンクを付けるHTMLタグを知らなければならない。
その辺りの事は、どのタグでも同じなので説明を省く。