Tooltip for Image Map?

**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:

Code:

<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">
 <!-- etc. etc.-->
</map>

More info here.

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.

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

Code:


<!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!

Originally Posted by coothead

Hi there dmwhipp,

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

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

Code:


<!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!

Originally Posted by styxlawyer

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:

Code:

<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">
 <!-- etc. etc.-->
</map>

More info here.

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!