I'm doing an image map of local counties with a CSS mouseover that shows a mini pop up with a picture and description of the city on the map. However, the code that I am using uses the same pop up display for every pop up link on the map. How do I create separate pop ups for each city? I tried making more of the mini pop up codes and naming them differently but that didn't work. Sorry if this is a silly question! Thanks!
The code looks like this:
<style type="text/css">
.transparent {
filter:alpha(opacity=75);
background-color:ffffff;
display:none;
width:270;
height:150;
position:absolute;
color: black;
border: 1 black;
}
</style>
<script>
/* this function shows the pop-up when
user moves the mouse over the link */
function Show()
{
/* get the mouse left position */
x = event.clientX + document.body.scrollLeft;
/* get the mouse top position */
y = event.clientY + document.body.scrollTop + 35;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
Popup.style.left = x;
/* set the pop-up's top */
Popup.style.top = y;
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
/* hide the pop-up */
Popup.style.display="none";
}
</script>
<body bgcolor="white" text="black"><img src="ACR-map.jpg" width="486" height="463" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="91,349,160,366" href="link.html" onMouseOut="Hide()" onMouseOver="Show()"
onMouseMove="Show()">
<area shape="rect" coords="350,258,399,274" href="#" id="Popup2" onMouseOut="Hide()" onMouseOver="Show()"
onMouseMove="Show()">
</map>
<div id="Popup" class="transparent">
<div style="background-color: #ffffff">
</div>
<div></b><img align=left src="sharpsburg_over.jpg">
</div>
</div>
The code looks like this:
<style type="text/css">
.transparent {
filter:alpha(opacity=75);
background-color:ffffff;
display:none;
width:270;
height:150;
position:absolute;
color: black;
border: 1 black;
}
</style>
<script>
/* this function shows the pop-up when
user moves the mouse over the link */
function Show()
{
/* get the mouse left position */
x = event.clientX + document.body.scrollLeft;
/* get the mouse top position */
y = event.clientY + document.body.scrollTop + 35;
/* display the pop-up */
Popup.style.display="block";
/* set the pop-up's left */
Popup.style.left = x;
/* set the pop-up's top */
Popup.style.top = y;
}
/* this function hides the pop-up when
user moves the mouse out of the link */
function Hide()
{
/* hide the pop-up */
Popup.style.display="none";
}
</script>
<body bgcolor="white" text="black"><img src="ACR-map.jpg" width="486" height="463" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="91,349,160,366" href="link.html" onMouseOut="Hide()" onMouseOver="Show()"
onMouseMove="Show()">
<area shape="rect" coords="350,258,399,274" href="#" id="Popup2" onMouseOut="Hide()" onMouseOver="Show()"
onMouseMove="Show()">
</map>
<div id="Popup" class="transparent">
<div style="background-color: #ffffff">
</div>
<div></b><img align=left src="sharpsburg_over.jpg">
</div>
</div>