【HTML】「画像」の特定の部分へ「リンク」を貼るには?範囲の指定方法をかんたんに解説!

HTML/CSS

みなさんこんにちは!おさかなです!

今回は「「画像」の特定の部分へ「リンク」を貼るには?範囲の指定方法」について、書いていこうと思います!

それでは、レッツゴー!!!!!

想定読者
・HTML/CSSを勉強中の人
・web制作に関わる人
・画像のリンク範囲を指定したい人

ソースコード

はじめに、全体のソースコードをご紹介します。

順番に解説していきます!

hoge」のところはご自身で名前を付けることができますので、プログラムに合わせて変更してみてください…!

画像の指定

まず<img>タグで表示したい画像を指定します。
この時に「usemap=”任意の文字列”」属性を付けることがポイントです!

<map>タグ

次に<map>タグを記載します。
name=””」属性を指定して、先ほど「usemap」属性で指定したものと同じ文字列を記載してください。

リンク範囲の指定

それから<map>タグの中<area>タグを書いていきます!
<area>タグの中には、下記の属性を指定します↓

shape … リンクの指定する範囲の形を決める
coords … 座標軸の考え方をもとに指定する範囲を決める→それぞれ指定できる値一覧を次項にのせておきます!
href=””」属性にはクリックしたいときに遷移させたいページを入力します。

指定できる値一覧

shape

circle … 円
rect … 四角形
poly … 多角形
default … 画像全体 ※ほとんど使いません

coords

circle … 中心のX座標、中心のY座標、半径
rect … 左上のX座標、左上のY座標、右下のX座標、右下のY座標
poly … 全ての角の頂点のX座標とY座標

「画像」の座標の調べ方

座標を調べる方法で、一番手っ取り早いのが「画像編集ソフト」を使うことです。
今回はWindowsの「ペイント」機能を使うので、まだ用意できていない人は準備してみてください!


こんな感じで「ペイント」で画像を開くと、X軸とY軸にメモリがあるのを確認できると思います!

このメモリを使って「画像」の座標を調べることができます!

実装結果

今回のコードを実装した結果です!
こんな感じで、画像の指定範囲にリンクが設置できているのがわかるかと思います!

これで、無事にコーディング完了です!

おつかれさまでした…!🍻

感想・まとめ

今回は「「画像」の特定の部分へ「リンク」を貼るには?範囲の指定方法」について、書いていきました…!

いかがだったでしょうか?

画像の一部にリンクを張りたいときなどに、活用できるコードなので覚えておくと良いと思います…!
(指定範囲の微調整が少しめんどくさいので、もっと簡単にできる方法があれば追記しますね…💦)

おさかなびではプログラミング学習中の人、ブログ初心者に向けて、「デジタル時代を楽しむためのミニ知識」をご紹介しています!
ぜひ他のページも覗いてみてください…!

それでは今回はこの辺で!

ここまで読んでくださり、ありがとうございました!

おさかなでした!

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました