How to make "image maps" and hover effect (show'hide div)?

I have to create a simple "interactive timeline", where on hover over a certain part of a graphic a div shows, and hides on mouseout.
Here is a link to the placeholder graphic of the timeline:
http://grenadamcintyrebros.com/modx/# (click the button "History Timeline")
This graphic that appears on click is the "hover area", but I thought to keep it as a graphic, and not turn it into text links. I know how to show/hide divs, but what would be the best way to get the hover areas to be exactly on top of the years?

couldn't you just use a jquery-tooltip-plugin
http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/

My problem is not the hover effect and show/hide functionality, but how to get the "hover areas" done, without building it with real text links. Any idea?

It sounds like you want to create an image map I've never used this before but it might help you solve your issue or at least give you an idea of what you have to do.

Good luck.

may be you are searching for map/area ?

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

used this here a longer time ago: http://www.trwautoservice.it/cerca-officina.html

Quote from: Bruno17 at Jul 14, 2013, 02:40 PM

may be you are searching for map/area ?
http://www.w3schools.com/tags/tag_area.asp
used this here a longer time ago: http://www.trwautoservice.it/cerca-officina.html

Yes, image maps are great for that, even better with this plugin: http://www.outsharked.com/imagemapster/
Example here: http://goo.gl/KpwYD