In this article you will learn how to create imagemap tooltips with CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . and jQuery
Understanding image maps
An image map is an HTML element that makes it possible to click on different areas of an image, which leads to different destinations or triggers different actions.
<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 with CSS
Let’s start by creating a basic CSSCSS ( Cascading style sheets ) means “multi-level format templates” in German. CSS is a formatting language for HTML, SVG and XML documents. CSS is used to separate the content of a website from the design! There is more information here . style for the tooltip. We want the tooltip to be displayed when users move the mouse over an image map area.
/* Web Font */
* {
font-family: 'Titillium Web', sans-serif;
}
/* Relative positioning*/
#image-map {
position: relative;
margin: 150px auto 20px auto;
}
/* Hide the original tooltip content */
.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 for tooltip interaction
$(document).ready(function(){
// Set the width and height of the image card so that they match the image size
$(‘#image-map’).css({‘width’:$(‘#image-map img’).width(),
‘height’:$(‘#image-map img’).height()
})
//Tooltip direction
var tooltipDirection;
for (i=0; i<$(“.pin”).length; i++)
{
// Set the direction type of the tooltip – up or down
if ($(“.pin”).eq(i).hasClass(‘pin-down’)) {
tooltipDirection = ‘tooltip-down’;
} else {
tooltipDirection = ‘tooltip-up’;
}
// Add the tooltip
$(“#image-map”).append(”
\
\
“);
}
// Show/hide tooltip
$(‘.tooltip-up, .tooltip-down’).mouseenter(function(){
$(this).children(‘.tooltip’).fadeIn(100);
}).mouseleave(function(){
$(this).children(‘.tooltip’).fadeOut(100);
})
});
It calculates the tooltip position based on the mouse coordinates.
As experts at Olbricht IT, we are proud to have optimized service-erp.de for mobile use. Our goal was to create a seamless, user-friendly experience for all mobile device users. Here’s a quick look at how we achieved this, with particular reference to our work with the Divi Theme
Responsive design with Divi Theme
WordPress
Optimization for speed: Mobile users expect fast loading times, and that’s exactly what we kept in mind. We have used state-of-the-art techniques to minimize loading times and guarantee a fast browsing experience.
At Olbricht IT, we understand the importance of a strong mobile presence. With our expertise in WordPress
Dieser Beitrag ist auch verfügbar auf:
Deutsch (German)
Skip to content