http://stackoverflow.com/questions/3920691/mo...parate-div

you will need to use a <map> tag if you want the links as dots on an image

http://www.w3schools.com/tags/tag_map.asp

Although personally I find the way that website displays info as confusing, as you need to constantly check where your cursor is and then check what the frame displays. I would go with a CSS tooltip solution so that the data appears next to each dot as you hover over it:

Your HTML code:


<a class="dot" >
    
    <img src="images/dot.png">
    
    <span>
    
       THE WONDERFUL DATA

    </span>

</a>


Your CSS code:


a.dot span
{ 
    display:none;

    padding:6px 9px 6px 9px;
    margin-left:8px;
    width: 100px;
    border-radius: 10px;
    background: #000000;
    border:1px solid #000000;
    color:#ffffff;

    -moz-box-shadow: 5px 5px rgba(0,0,0,0.5);
    -webkit-box-shadow: 5px 5px rgba(0,0,0,0.5);
    box-shadow: 5px 5px rgba(0,0,0,0.5);

}

a.dot:hover span
{
    display:inline;
    position:absolute;
}


Just repeat the <a></a> part as many times as necessary. Only the "display" and "position" attributes make it work, the rest is just styling that you can adjust. You will still need a <map> tag though if you want an irregular layout like the cities of Italy (although <map> might have remained obsolete with a much better CSS alternative... I'm not really up to date on the matter).

This makes the tooltip box appear to the right of the "dot", the exact difference of which is determined by the margin-left. If you want the box to appear in any other way it gets a bit more complicated.

But anyway, google is your friend. Just make sure you phrase your necessities correctly and type your question in Google. There is a 99.99 % chance it has been asked and answered before, most likely on stackoverflow.com or some dedicated website.

could you setup a page like this for me?

http://paste2.org/cpk1fLD0

Try that...

http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm