イメージマップの例

下記の1枚の画像には、12個のリンクが含まれています。「木の実」部分や、「窓」・「扉」部分にマウスポインタを載せてみて下さい。

ウェブ作成ソフト Microsoft Expression Web が無料化 Web上で使えるスペース(空白文字)いろいろ 基本認証でアクセス制限をかける方法 画像上の自由な位置に文字を重ねる方法 スタイルシートの class と id の使い分け 複数の画像がふわっと切り替わるスライドショーを作る 移転先へ自動的に移動(リダイレクト)させる 画像を使わずにCSSだけで角を丸くする方法 ウインドウ幅に合わせて画像サイズを変化させる方法 複数サイズでのファビコンの作り方と設置方法 .htaccessファイルの書き方と設置方法 PC版とスマートフォン版サイトを自動振り分けする方法

イメージマップサンプル

たいていのブラウザでは、マウスポインタで選択するほかに、キーボードの[Tab]キーを使っても1つずつリンクを移動することができます。
なお、画像が表示されなかった場合は、イメージマップそのものも機能しなくなるブラウザもあります。(どちらにせよ、画像が見えないのであればユーザが操作できませんから、イメージマップ機能が使えても使えなくても意味がありませんが。)

イメージマップの作り方記事に戻る