Popup image on hover

[More2Do]

1) Script Title: Popup on hover? (Sorry, not sure this is correct title. I don't see it listed on your website, but it is Dynamic Drive code)

2) Script URL (on DD): ?

3) Describe problem: I'm trying to add a popup image to an image map hotspot on hover. I've used this css/html before on buttons, but never on image maps.

Page in question:

http://www.legacyptla.com/Stage/html/investment_portfolio-alt.html

(top left orange button is currently the only one with an image map)

========================
My html looks like this:


<div class="mapcontainer">
<img src="../images/US_Map-alt.png" alt="Investment Portfolio" width="960" height="550" usemap="#Map" class="scalable" />
<a class="thumbnail2"><span><img src="../images/popup_washington-cedarwillows.png" width="450" height="500" class="scalable"/>
<map name="Map"><area shape="circle" coords="146,53,6" href="#" alt="Cedar Willows"></map></span></a>
</div>

=========================
The css looks like this:


.mapcontainer{
position: relative;
}

.thumbnail2 img{
border: none;
margin: 0;
}

.thumbnail2:hover{
background-color: transparent;
}

.thumbnail2:hover img{
border: none;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
padding: 0px;
left: -1000px;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;
}

.thumbnail2:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 200px;
left: 60px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

[More2Do]

Please disregard this post. I found a work-around. Thanks.

[jscheuer1]

In the future, please use the forum's bbcode tags to indent your code and make it more readable:

for php code............
<?php /* code goes here */ ?>
for html...............
<!-- markup goes here -->.....
for js/css/other.......
code goes here................

The simple editor has a button for the
tag, you may use that:

#

Not the #i one, which is really just for highlighting.

The advanced editor (activated by using the 'Go Advanced' button from the simple editor) has buttons for PHP and HTML code braces as well. But for simplicity, you can just use the
tag for any code if you prefer.

Your applicable post in this thread has already been edited for you by a member of the moderator staff.