Erstellen von Imagemap-Tooltips mit CSS und jQuery

Autor

Marius Marzian

Datum 30. November 2023

Kategorie SEO

Inhalt

Imagemaps verstehen
Styling mit CSS
jQuery für Tooltip-Interaktion

Imagemaps verstehen

Eine Imagemap ist ein HTML-Element, das es ermöglicht, verschiedene Bereiche eines Bildes anzuklicken, was zu unterschiedlichen Zielen führt oder verschiedene Aktionen auslöst.
<div id="image-map"> <img width="611" height="438" src="your-image.jpg" alt="Our Locations"> <div class="pin" data-xpos="255" data-ypos="65"> <h2>Chelsea Place</h2> <ul> <li><strong>123 Street Address</strong></li> <li>City, ST, 12345</li> <li><strong>(555) 555-5555</strong></li> <li><a href="#" target="_blank">Website</a></li> <li>Coming in Spring 2015</li> </ul> </div> </div>

Styling mit CSS

Beginnen wir mit der Erstellung eines grundlegenden CSS-Stils für den Tooltip. Wir möchten, dass der Tooltip angezeigt wird, wenn Benutzer mit der Maus über einen Imagemap-Bereich fahren.
/* Web Font */ * { font-family: 'Titillium Web', sans-serif; }

/* Relative Positionierung*/
#image-map {
position: relative;
margin: 150px auto 20px auto;
}

/* Blenden Sie den ursprünglichen Tooltip-Inhalt aus */
.pin {
display: none;
}

/* Begin styling the tooltips and pins */
.tooltip-up, .tooltip-down {
position: absolute;
width: 25px;
height: 25px;
background-color: #000;
border-radius: 50%;}

.tooltip-down {
background-position: 0 -37px;
}

.tooltip {
display: none;
width: 200px;
cursor: help;
text-shadow: 0 1px 0 #fff;
position: absolute;
top: 10px;
left: 50%;
z-index: 999;
margin-left: -115px;
padding:15px;
color: #222;
border-radius: 5px;
box-shadow: 0 3px 0 rgba(0,0,0,.7);
background: #fff1d3;
background: linear-gradient(top, #fff1d3, #ffdb90);
}

.tooltip::after {
content: “;
position: absolute;
top: -10px;
left: 50%;
margin-left: -10px;
border-bottom: 10px solid #fff1d3;
border-left: 10px solid transparent;
border-right : 10px solid transparent;
}

.tooltip-down .tooltip {
bottom: 12px;
top: auto;
}

.tooltip-down .tooltip::after {
bottom: -10px;
top: auto;
border-bottom: 0;
border-top: 10px solid #ffdb90;
}

.tooltip h2 {
font: bold 1.3em ‚Trebuchet MS‘, Tahoma, Arial;
margin: 0 0 10px;
}

.tooltip ul {
margin: 0;
padding: 0;
list-style: none;
}

jQuery für Tooltip-Interaktion

$(document).ready(function(){

// Stellen Sie die Breite und Höhe der Bildkarte so ein, dass sie mit der Bildgröße übereinstimmen
$(‚#image-map‘).css({‚width‘:$(‚#image-map img‘).width(),
‚height‘:$(‚#image-map img‘).height()
})

//Tooltip-Richtung

var tooltipDirection;

for (i=0; i<$(„.pin“).length; i++)
{
// Legen Sie den Richtungstyp des Tooltips fest – nach oben oder unten

if ($(„.pin“).eq(i).hasClass(‚pin-down‘)) {
tooltipDirection = ‚tooltip-down‘;
} else {
tooltipDirection = ‚tooltip-up‘;
}

// Fügen Sie den Tooltip hinzu
$(„#image-map“).append(“

„);
}

// Tooltip ein-/ausblenden
$(‚.tooltip-up, .tooltip-down‘).mouseenter(function(){
$(this).children(‚.tooltip‘).fadeIn(100);
}).mouseleave(function(){
$(this).children(‚.tooltip‘).fadeOut(100);
})
});

Es berechnet die Tooltip-Position basierend auf den Mauskoordinaten.

Als Experten bei OIT GmbH sind wir stolz darauf, service-erp.de in Sachen mobile Nutzung optimiert zu haben. Unser Ziel war es, eine nahtlose, benutzerfreundliche Erfahrung für alle Mobilgeräte-Nutzer zu schaffen. Hier ist ein kurzer Einblick, wie wir das erreicht haben, unter besonderer Berücksichtigung unserer Arbeit mit dem Divi Theme und WordPress.

Responsive Design mit Divi Theme: Wir haben das Divi Theme genutzt, um ein responsives und flexibles Design für service-erp.de zu erstellen. Divi ist bekannt für seine Benutzerfreundlichkeit und Flexibilität, was uns erlaubt hat, ein Design zu gestalten, das sich automatisch an verschiedene Bildschirmgrößen und Geräte anpasst. Mit Divi haben wir sicherstellen können, dass jeder Aspekt der Webseite, von der Navigation bis zu den Inhalten, optimal auf mobilen Geräten dargestellt wird.

WordPress – Eine solide Basis: WordPress ist das Rückgrat von service-erp.de. Als weltweit führendes Content Management System bietet WordPress eine robuste und flexible Plattform für Webseiten jeder Größe. Die Kombination aus WordPress und Divi ermöglichte es uns, eine leistungsstarke, skalierbare und benutzerfreundliche mobile Webseite zu entwickeln.

Optimierung für Schnelligkeit: Mobile Nutzer erwarten schnelle Ladezeiten, und genau das haben wir im Auge behalten. Wir haben modernste Techniken angewendet, um die Ladezeiten zu minimieren und ein schnelles Browsing-Erlebnis zu garantieren.

Bei OIT GmbH verstehen wir die Wichtigkeit einer starken mobilen Präsenz. Mit unserer Expertise in WordPress und Divi, kombiniert mit unserem Fokus auf Benutzererfahrung und Geschwindigkeit, haben wir service-erp.de zu einer mobilen Webseite gemacht, die nicht nur gut aussieht, sondern auch hervorragend funktioniert.