みなさんこんにちは！おさかなです！
今回は「「画像」の特定の部分へ「リンク」を貼るには？範囲の指定方法」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・HTML/CSSを勉強中の人
・web制作に関わる人
・画像のリンク範囲を指定したい人
ソースコード
はじめに、全体のソースコードをご紹介します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>hogehoge</title> </head> <body> <img src="1088010201.png" alt="画像" usemap="#hoge"> <map name="hoge"> <area shape="rect" coords="200, 200, 300, 300" href="https://osakanav.com/" alt="画像">] </map> </body> </html>
順番に解説していきます！
画像の指定
まず<img>タグで表示したい画像を指定します。
この時に「usemap=”任意の文字列”」属性を付けることがポイントです！
<img src="1088010201.png" alt="画像" usemap="#hoge">
<map>タグ
次に<map>タグを記載します。
「name=””」属性を指定して、先ほど「usemap」属性で指定したものと同じ文字列を記載してください。
<map name="hoge"> 次項のコードを入力 </map>
リンク範囲の指定
それから<map>タグの中に<area>タグを書いていきます！
<area>タグの中には、下記の属性を指定します↓
coords … 座標軸の考え方をもとに指定する範囲を決める→それぞれ指定できる値一覧を次項にのせておきます！
<map name="hoge"> <area shape="rect" coords="200, 200, 300, 300" href="https://osakanav.com/" alt="画像">] </map>
指定できる値一覧
shape
rect … 四角形
poly … 多角形
default … 画像全体 ※ほとんど使いません
coords
rect … 左上のX座標、左上のY座標、右下のX座標、右下のY座標
poly … 全ての角の頂点のX座標とY座標
「画像」の座標の調べ方
座標を調べる方法で、一番手っ取り早いのが「画像編集ソフト」を使うことです。
今回はWindowsの「ペイント」機能を使うので、まだ用意できていない人は準備してみてください！
こんな感じで「ペイント」で画像を開くと、X軸とY軸にメモリがあるのを確認できると思います！
このメモリを使って「画像」の座標を調べることができます！
実装結果
今回のコードを実装した結果です！
こんな感じで、画像の指定範囲にリンクが設置できているのがわかるかと思います！
これで、無事にコーディング完了です！
おつかれさまでした…！🍻
感想・まとめ
今回は「「画像」の特定の部分へ「リンク」を貼るには？範囲の指定方法」について、書いていきました…！
いかがだったでしょうか？
画像の一部にリンクを張りたいときなどに、活用できるコードなので覚えておくと良いと思います…！
(指定範囲の微調整が少しめんどくさいので、もっと簡単にできる方法があれば追記しますね…💦)
おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています！
ぜひ他のページも覗いてみてください…！
それでは今回はこの辺で！
ここまで読んでくださり、ありがとうございました！
おさかなでした！
【おさかなび-osakanav-】では、この記事の感想！おさかなへの応援メッセージ！おさかなに聞きたい事、質問！記事にしてほしい内容！などを大募集中！
「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください！
