イメージマップの作り方 !HTMLで1画像内に複数リンクを設定(画像)

西村 文宏

西村 文宏

ホームページ作成 ガイド

応用情報技術者

初心者向けの「わかりやすさ」を重視した解説に定評があるウェブ系テクニカルライター。ウェブの黎明期に趣味で始めた個人サイト製作からその「楽しさ」に魅了され、作成方法に関する様々な情報を発信。企業や団体のウェブサイト製作・解説書籍の執筆なども行っている。

...続きを読む
1枚の画像の中に、場所に応じて複数個のリンクを設定できる
1枚の画像の中に、場所に応じて複数個のリンクを設定できる
イメージマップを使ったサンプルページ
イメージマップを使ったサンプルページ
画像が表示されないと、何も把握できない
画像が表示されないと、何も把握できない
まずは画像を読み込ませる
まずは画像を読み込ませる
作りたい形を選択してから、画像内の望みの位置をマウスで示す
作りたい形を選択してから、画像内の望みの位置をマウスで示す
画面右側にイメージマップ用のHTMLソースが生成される
画面右側にイメージマップ用のHTMLソースが生成される
イメージマップの作成対象にしたい画像をブラウザ上に読み込ませる
イメージマップの作成対象にしたい画像をブラウザ上に読み込ませる
リンクとして作りたい形状を選択してから、画像内の望みの位置(座標)をマウスで示す
リンクとして作りたい形状を選択してから、画像内の望みの位置(座標)をマウスで示す
画面右側にイメージマップ用のHTMLソースが生成されていく
画面右側にイメージマップ用のHTMLソースが生成されていく
画像が表示されないと、イメージマップで用意されたリンクは何も分からなくなる
画像が表示されないと、イメージマップで用意されたリンクは何も分からなくなる
この写真の記事を読む
1枚の画像の中に、場所に応じて複数個のリンクを設定できる
イメージマップを使ったサンプルページ
画像が表示されないと、何も把握できない
まずは画像を読み込ませる
作りたい形を選択してから、画像内の望みの位置をマウスで示す
画面右側にイメージマップ用のHTMLソースが生成される
イメージマップの作成対象にしたい画像をブラウザ上に読み込ませる
リンクとして作りたい形状を選択してから、画像内の望みの位置(座標)をマウスで示す
画面右側にイメージマップ用のHTMLソースが生成されていく
画像が表示されないと、イメージマップで用意されたリンクは何も分からなくなる
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

カテゴリー一覧

All Aboutサービス・メディア

All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます