Tooltip for Image Map? [Archive] - Dynamic Drive Forums

dmwhipp

09-17-2015, 06:35 PM

Hi,
I'm looking for some sort of script that would allow me to have caption boxes when mousing over different sections of an image. For example, here is the test page with the image: http://cisflorida.org/model2.html.

When you mouse over the different parts of the image, such as the number 1, a caption box would appear with details. A different box would appear when mousing over the image section with the number 2, etc.

Thanks,
Deborah

styxlawyer

09-17-2015, 07:02 PM

It's very simple, no need for a script just basic HTML. All you do is create an image map for your image and add 'title=".."' tags inside each <area ...> tag like this:

<img src="YourImage.jpg" alt="!" usemap="#numbers">

<map name="numbers">
<area shape="circle" coords="x1,y1,radius1" href=".." title="1">
<area shape="circle" coords="x2,y2,radius2" href=".." title="2">
<area shape="circle" coords="x3,y3,radius3" href=".." title="3">

</map>

More info here (http://www.html-5-tutorial.com/map-and-area-elements.htm).

Edited to add: I looked at the source code of your page and noticed that the image is linked to a map named "model" but you have no such map in your page. The map immediately after the image is named "homepage", so won't work!

coothead

09-17-2015, 10:31 PM

Hi there dmwhipp,

there is no need for javascript, image map or title attribute. :D

Instead, we can just let CSS take the strain...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS tooltip example</title>

<style media="screen">
#dmwhipp {
position:relative;
width:890px;
height:779px;
padding:0;
margin:0 auto;
background-image:url(http://cisflorida.org/graphics/model/model-min.gif);
list-style-type:none;
}
#dmwhipp li {
position:absolute;
}
#dmwhipp li:hover div {
display:block;
}
#dmwhipp a {
display:block;
width:77px;
height:77px;
border-radius:50%;
}
#dmwhipp div {
display:none;
position:absolute;
box-sizing:border-box;
width:216px;
height:166px;
padding:10px;
border:1px solid #b7d6e9;
border-radius:10px;
background-color:#fff;
background-image:linear-gradient(to bottom,#fff,#b7d6e9);
box-shadow:inset 0 0 20px #999,4px 4px 4px #999;
color:#669;
}
#one {
top:240px;
left:521px;
}
#one div {
top:143px;
right:44px;
}
#two {
top:353px;
left:633px;
}
#two div {
top:29px;
right:156px;
}
#thr {
top:494px;
left:659px;
}
#thr div {
top:-112px;
right:182px;
}
#fou {
top:494px;
left:158px;
}
#fou div {
top:-112px;
left:180px;
}
#fiv {
top:353px;
left:181px;
}
#fiv div {
top:29px;
left:157px;
}
#dmwhipp h6 {
margin:10px 0;
text-align:center;
text-transform:uppercase;
}
#dmwhipp p {
font-size:75%;
}
</style>

</head>
<body>

<ul id="dmwhipp">
<li id="one">
<a href="#"></a>
<div>
<h6>assessment</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="two">
<a href="#"></a>
<div><h6>planning</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="thr">
<a href="#"></a>
<div>
<h6>support</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fou">
<a href="#"></a>
<div><h6>monitoring</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fiv">
<a href="#"></a>
<div>
<h6>evaluation</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
</ul>

</body>
</html>

coothead

dmwhipp

09-23-2015, 03:58 PM

Thanks!

Hi there dmwhipp,

there is no need for javascript, image map or title attribute. :D

Instead, we can just let CSS take the strain...

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS tooltip example</title>

<style media="screen">
#dmwhipp {
position:relative;
width:890px;
height:779px;
padding:0;
margin:0 auto;
background-image:url(http://cisflorida.org/graphics/model/model-min.gif);
list-style-type:none;
}
#dmwhipp li {
position:absolute;
}
#dmwhipp li:hover div {
display:block;
}
#dmwhipp a {
display:block;
width:77px;
height:77px;
border-radius:50%;
}
#dmwhipp div {
display:none;
position:absolute;
box-sizing:border-box;
width:216px;
height:166px;
padding:10px;
border:1px solid #b7d6e9;
border-radius:10px;
background-color:#fff;
background-image:linear-gradient(to bottom,#fff,#b7d6e9);
box-shadow:inset 0 0 20px #999,4px 4px 4px #999;
color:#669;
}
#one {
top:240px;
left:521px;
}
#one div {
top:143px;
right:44px;
}
#two {
top:353px;
left:633px;
}
#two div {
top:29px;
right:156px;
}
#thr {
top:494px;
left:659px;
}
#thr div {
top:-112px;
right:182px;
}
#fou {
top:494px;
left:158px;
}
#fou div {
top:-112px;
left:180px;
}
#fiv {
top:353px;
left:181px;
}
#fiv div {
top:29px;
left:157px;
}
#dmwhipp h6 {
margin:10px 0;
text-align:center;
text-transform:uppercase;
}
#dmwhipp p {
font-size:75%;
}
</style>

</head>
<body>

<ul id="dmwhipp">
<li id="one">
<a href="#"></a>
<div>
<h6>assessment</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="two">
<a href="#"></a>
<div><h6>planning</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="thr">
<a href="#"></a>
<div>
<h6>support</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fou">
<a href="#"></a>
<div><h6>monitoring</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
<li id="fiv">
<a href="#"></a>
<div>
<h6>evaluation</h6>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec
ultricies sollicitudin nisi, ut molestie felis adipiscing sit
amet.
</p>
</div>
</li>
</ul>

</body>
</html>

coothead

dmwhipp

09-23-2015, 03:59 PM

Thank you!

It's very simple, no need for a script just basic HTML. All you do is create an image map for your image and add 'title=".."' tags inside each <area ...> tag like this:

<img src="YourImage.jpg" alt="!" usemap="#numbers">

<map name="numbers">
<area shape="circle" coords="x1,y1,radius1" href=".." title="1">
<area shape="circle" coords="x2,y2,radius2" href=".." title="2">
<area shape="circle" coords="x3,y3,radius3" href=".." title="3">

</map>

More info here (http://www.html-5-tutorial.com/map-and-area-elements.htm).

Edited to add: I looked at the source code of your page and noticed that the image is linked to a map named "model" but you have no such map in your page. The map immediately after the image is named "homepage", so won't work!