Hotspot image popup?

Question

Hey everyone,
Im very new to Dreamweaver / HTML / Javascript but im trying my best so bare with me! Currently i have a simple thumbnail image which i can trigger a larger image to appear (on top) when i roll over the thumbnail image. However im trying to trigger this event with a hotspot and not the thumbnail as i want to have several hotspots on one large image which will trigger serval different popup images on top of the large image.
My HTML and CSS i currently have to do this:
HTML:
<a class="thumbnail" href="#thumb"><img src="sales1.1_thumb.jpg" width="80px" height="60px" border="0" /><span>
<img src="sales1.2.jpg" />
</span>
</a>
CSS:
<style type="text/css">
.thumbnail:hover{
background-color: transparent;
z-index: 50;
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 2px;
left: 1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 1;
left: 200px; /*position where enlarged image should offset horizontally */
</style>
This works perfect when rolling over the thumbnail image, however how can i apply this same effect by using hotspots on one image?
Thankyou for your help

Answer 1

Hi Zabeth,
Thanks for your reply!
How exactly can i define the hotspot and not the image as the rollover? I guess i replace the:
<a class="thumbnail" href="#thumb"><img src="sales1.1_thumb.jpg" width="80px" height="60px" border="0" /><span>
<img src="sales1.2.jpg" />
</span>
</a>
with something like:
<a class="thumbnail" href="#thumb"><map name="Map" id="Map"> <area shape="rect" coords="33,140,114,260" href="#" /></map><span>
<img src="sales1.2.jpg" />
</span>
</a>
However this obviously doesnt work! Am i on the right direction!?
Thanks