So implementieren Sie Bildmapping mit CSS

1. Einleitung

Mit Imagemaps können Sie Bereiche eines Bildes als Hotspots kennzeichnen. Wenn Sie mit der Maus über diesen Bereich fahren, werden einige Inhaltsinformationen angezeigt. Natürlich können wir auch auf diesen Bereich klicken, um zu springen und eine Funktion ähnlich der Bildnavigation zu implementieren.

Ich habe im Internet ein Bild wie das oben gezeigte gefunden und möchte folgende Funktion erreichen: Wenn ich mit der Maus über die jeweilige Person fahre, hoffe ich, dass ein rechteckiges Kästchen erscheint und ich nach dem Anklicken auf die entsprechende Website springen kann.

Die Wirkung ist wie folgt:

2. Code-Implementierung

1. Als Erstes müssen Sie das Bild zur Seite hinzufügen und es in einem benannten Div platzieren:

<div Klasse="Bildkarte">
  <img Breite="500" Höhe="350" Quelle="test.jpg">
</div>

2. Fügen Sie dann nach dem Bild eine Liste mit den Website-Links aller Personen hinzu. Jedem Listenelement muss eine Klasse zugewiesen werden, um die Person im Listenelement zu identifizieren . Sie können jedem Link auch ein title geben, das den Namen der Person enthält. Dadurch wird der Name der Person in einem Tooltip angezeigt, der in den meisten Browsern erscheint, wenn Sie mit der Maus über den Link fahren.

<div Klasse="Bildkarte">
  <img Breite="500" Höhe="350" Quelle="test.jpg">
  <ul>
    <li Klasse="baidu">
      <a href="https://www.baidu.com" target="_blank">
        <span class="note">Baidu</span>
      </a>
    </li>
    <li Klasse="tengxun">
      <a href="https://www.qq.com" target="_blank">
        <span class="note">Tencent</span>
      </a>
    </li>
    <li Klasse="xinlang">
      <a href="https://www.sina.com.cn" target="_blank">
        <span class="note">Sina</span>
      </a>
    </li>
    <li Klasse="taobao">
      <a href="https://www.taobao.com" target="_blank">
        <span class="anmerkung">Taobao</span>
      </a>
    </li>
    <li Klasse="jd">
      <a href="https://www.jd.com" target="_blank">
        <span class="anmerkung">Jingdong</span>
      </a>
    </li>
  </ul>
</div>

Ich möchte den Inhaltsstil anpassen, der angezeigt wird, wenn die Maus darüber fährt. Ich verwende das Titelattribut nicht, also füge ich dem a-Tag einen Span hinzu.

3. Stellen Sie die Breite und Höhe des äußeren Div so ein, dass es mit der Größe des Bildes übereinstimmt . Legen Sie dann die Positionseigenschaft des Div auf „relativ“ fest, da dadurch der enthaltene Link absolut relativ zu den Rändern des Div (also des Bildes) positioniert werden kann.

Ich möchte nicht, dass die schwarzen Punkte der Liste auf der Seite erscheinen, und ich möchte auch die inneren und äußeren Ränder der Listenelemente entfernen.

.imagemap {
  Breite: 500px;
  Höhe: 350px;
  Position: relativ;
}

.imagemap ul {
  Rand: 0;
  Polsterung: 0;
  Listenstil: keiner;
}

4. Als Nächstes wenden Sie Stile auf die Links an. Positionieren Sie die Links absolut (da wir das Positionsattribut auf dem äußeren Div auf relativ gesetzt haben, erfolgt die Positionierung hier relativ zum Div und die Breite und Höhe des Div und des Bildes sind gleich, was einer Positionierung von der oberen linken Ecke des Bildes aus entspricht) und positionieren Sie sie zu den entsprechenden Personen, um Hotspots zu bilden. Allerdings müssen Sie zunächst deren Breite und Höhe festlegen, um die gewünschte Klickfläche zu schaffen.

.imagemap ein {
  Position: absolut;
  /*In ein Blockelement umwandeln, damit es einen Bereich bilden kann*/
  Anzeige: Block;
  Breite: 50px;
  Höhe: 60px;
  Textdekoration: keine;
}

.imagemap .baidu ein {
  oben: 70px;
  links: 65px;
}

.imagemap .tengxun a {
  oben: 85px;
  links: 150px;
}

.imagemap .xinlang a {
  oben: 70px;
  links: 230px;
}

.imagemap .taobao ein {
  oben: 70px;
  links: 305px;
}

.imagemap .jd a {
  oben: 70px;
  links: 365px;
}

/*Wenn die Maus darüber bewegt wird, erscheint ein Kästchen*/
.imagemap a:hover {
  Rand: 1px durchgehend weiß;
}

5. Als Nächstes müssen wir den Stil des Textinhalts festlegen, der angezeigt wird, wenn die Maus darüber bewegt wird. Es soll über dem Zeichen angezeigt werden, eine Hintergrundfarbe und Polsterung haben und der Text soll zentriert sein:

.imagemap eine .note {
  Position: absolut;
  oben: -2em;
  links: -100em;
  Hintergrundfarbe: #42b983;
  Farbe: weiß;
  Breite: 2em;
  Textausrichtung: zentriert;
  Polsterung: 0,2em 0,5em;
  Rahmenradius: 5px;
}

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

Beachten:

• Wenn die Positionseigenschaft auf absolut gesetzt ist, wird das Element aus dem normalen Dokumentfluss verschoben und die Elementposition wird durch Angabe des Versatzes des Elements relativ zum nächstgelegenen nicht statisch positionierten Vorgängerelement bestimmt. Da wir den Link „a“-Tag absolut in der Liste positioniert haben, wird der Span im „a“-Tag relativ zum Link „a“ positioniert.
• Wenn Sie hier für top einen negativen Wert festlegen, wird das Element eine bestimmte Distanz nach oben verschoben. Der linke Wert beträgt -100em, sodass die Spanne am Anfang nicht innerhalb des sichtbaren Bereichs liegt. Wenn die Maus dann vorbeifährt, setzen Sie den Wert von links auf die richtige Position zurück.

Darüber hinaus ist es unter normalen Umständen sinnlos, die Breite und Höhe von Inline-Elementen festzulegen. Im obigen Code können wir jedoch erfolgreich die Breite der Spanne festlegen, da die Spanne hier absolut positioniert ist. Die Breite und Höhe von Inline-Elementen nach der absoluten Positionierung können festgelegt werden.

Wissenspunkt: Mehrere Methoden zum Festlegen der Breite und Höhe von Inline-Elementen

3 Möglichkeiten zum Festlegen der Breite und Höhe von Inline-Elementen

• Verwenden Sie die Anzeige: Anzeige:Block / Inline-Block
• Position verwenden: Position: absolut / fest
• Verwenden Sie Float: Float: links / rechts

6. Nein, Sie können es testen. Jetzt wurde ein einfaches Imagemapping implementiert.

Dies ist das Ende dieses Artikels über die Implementierung von Bildmapping mit CSS. Weitere Informationen zur Implementierung von Bildmapping mit CSS finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!