CSSでイメージマッピングを実装する方法

1. はじめに

イメージマップを使用すると、画像の領域をホットスポットとして指定できます。この領域にマウスを移動すると、いくつかのコンテンツ情報が表示されます。もちろん、この領域をクリックしてジャンプし、画像ナビゲーションと同様の機能を実装することもできます。

私はインターネットで上記のような画像を見つけました。マウスを各人物の上に移動すると長方形のボックスが表示され、それをクリックすると対応する Web サイトにジャンプできるという機能を実現したいと考えています。

効果は以下のとおりです。

2. コードの実装

1. 最初に行う必要があるのは、ページに画像を追加し、名前付き div に配置することです。

<div class="イメージマップ">
  <img 幅="500" 高さ="350" src="test.jpg">
</div>

2. 次に、画像の後に各人のウェブサイトリンクのリストを追加します。リスト項目内の人物を識別するために、各リスト項目にクラスを割り当てる必要があります。各リンクに人物の名前を含むtitle属性を付けることもできます。これにより、リンクにマウスを移動したときにほとんどのブラウザに表示されるツールチップにその人の名前が表示されます。

<div class="イメージマップ">
  <img 幅="500" 高さ="350" src="test.jpg">
  <ul>
    <li class="baidu">
      <a href="https://www.baidu.com" target="_blank">
        <span class="note">百度</span>
      </a>
    </li>
    <li class="tengxun">
      <a href="https://www.qq.com" target="_blank">
        <span class="note">テンセント</span>
      </a>
    </li>
    <li class="xinlang">
      <a href="https://www.sina.com.cn" target="_blank">
        <span class="note">シナ</span>
      </a>
    </li>
    <li class="taobao">
      <a href="https://www.taobao.com" target="_blank">
        <span class="note">タオバオ</span>
      </a>
    </li>
    <li class="jd">
      <a href="https://www.jd.com" target="_blank">
        <span class="note">京東</span>
      </a>
    </li>
  </ul>
</div>

マウスをホバーしたときに表示されるコンテンツのスタイルをカスタマイズしたいです。title属性は使用しないので、aタグにspanを追加します。

3. 外側の div の幅と高さを、画像のサイズと一致するように設定します。次に、div の位置プロパティを relative に設定します。これにより、含まれるリンクを div (つまり、画像) の端を基準にして絶対的に配置できるようになります。

リストの黒い点がページに表示されないようにし、リスト項目の内側と外側の余白も削除したいと思います。

.イメージマップ{
  幅: 500ピクセル;
  高さ: 350ピクセル;
  位置: 相対的;
}

.imagemap ul {
  マージン: 0;
  パディング: 0;
  リストスタイル: なし;
}

4. 次に、リンクにスタイルを適用します。リンクを絶対的に配置します (外側の div で position 属性を relative に設定しているため、ここでの配置は div に対して相対的であり、div と画像の幅と高さは同じで、画像の左上隅からの配置に相当します)。そして、対応する人物に配置してホットスポットを形成します。ただし、まず必要なクリック領域を作成するために、幅と高さを設定する必要があります。

.imagemap {
  位置: 絶対;
  /*領域を形成できるようにブロックレベル要素に変換します*/
  表示: ブロック;
  幅: 50px;
  高さ: 60px;
  テキスト装飾: なし;
}

.imagemap .baidu a {
  上: 70px;
  左: 65px;
}

.imagemap .tengxun a {
  上: 85px;
  左: 150px;
}

.imagemap .xinlang a {
  上: 70px;
  左: 230px;
}

.imagemap .taobao a {
  上: 70px;
  左: 305px;
}

.imagemap .jd a {
  上: 70px;
  左: 365ピクセル;
}

/*マウスを移動するとボックスが表示されます*/
.imagemap a:hover {
  境界線: 1px 白の実線;
}

5. 次に、マウスを移動したときに表示されるテキスト コンテンツのスタイルを設定する必要があります。文字の上に表示し、背景色とパディングを設定し、テキストを中央に配置するようにします。

.imagemap .note {
  位置: 絶対;
  上: -2em;
  左: -100em;
  背景色: #42b983;
  色: 白;
  幅: 2em;
  テキスト配置: 中央;
  パディング: 0.2em 0.5em;
  境界線の半径: 5px;
}

.imagemap a:hover .note {
  左: 0;
}

知らせ：

• 位置プロパティが absolute に設定されている場合、要素は通常のドキュメント フローから移動され、要素の位置は、最も近い非静的配置の祖先要素に対する要素のオフセットを指定して決定されます。リスト内のリンク a タグを絶対的に配置したため、a タグ内の span はリンク a に対して相対的に配置されます。
• ここで、top を負の値に設定すると、要素が一定の距離だけ上に移動し、left の値が -100em になるため、span は最初は表示領域内にありません。次に、マウスが通過したときに、左の値を正しい位置にリセットします。

また、通常であれば、インライン要素の幅と高さを設定するのは意味がありません。しかし、上記のコードでは、ここで span が絶対配置されているため、span の幅をうまく設定できます。絶対配置後のインライン要素の幅と高さを設定できます。

知識ポイント: インライン要素の幅と高さを設定するいくつかの方法

インライン要素の幅と高さを設定する3つの方法

• ディスプレイ: display:block / inline-block を使用します
• 位置を使用します: position:absolute / fixed
• float を使用: float:left / right

6. いいえ、テストできます。これで、簡単なイメージ マッピングが実装されました。

CSS でイメージ マッピングを実装する方法についての記事はこれで終わりです。CSS でイメージ マッピングを実装する詳細については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。