I've a background image with an image map and hotspots on it. On rollover these hotspots display a mouseover image using a combination of javascript and css.
My intention is to get the background image to stay centered and the mouseover images to always appear in the same place regardless of window size. Currently if you make the window larger or smaller the mouse over image moves. It seems to be relative to the window rather than the div it sits in?
Can anyone offer me some help?
ta,
jbw
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/javascript">
<!--hide
function popup(width,height,link)
{
window.open(link,"popup","width=" + width + ",height=" + height + ",location=no,resizable=no,scrollbars=no");
}
//-->
// hide div
function hide(divid) { if (document.layers) document.layers[divid].visibility = 'hide';
else if (document.all) document.all[divid].style.visibility = 'hidden';
else if (document.getElementById) document.getElementById(divid).style.visibility = 'hidden';
}
// show div
function show(divid) { if (document.layers) document.layers[divid].visibility = 'show';
else if (document.all) document.all[divid].style.visibility = 'visible';
else if (document.getElementById) document.getElementById(divid).style.visibility = 'visible';
}
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0px; padding:0px;
text-align:center;
background-color:#201418
}
#container {
width: 797px;
height: 559px;
margin:0px auto;
}
#arc {
visibility:hidden;
position:absolute;
background-color:#00FF00;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
z-index: 2;
}
</style>
<body>
<div id="container"><img src=http://www.webdeveloper.com/forum/archive/index.php/"" alt="Background" width="787" height="599" border="0" usemap="#Map">
<div id="arc"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"archive.htm" target="_self"><img src="" alt="" width="118" height="215" border=0 onMouseOver="show('arc');" onMouseOut="hide('arc');"></a> </div>
<map name="Map">
<area shape="rect" coords="136,67,260,269" onMouseOver="show('arc');" onMouseOut="hide('arc');">
<area shape="rect" coords="267,254,376,347" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="313,104,464,195" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="460,199,537,319" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="579,267,661,434" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="393,344,471,496" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
</map>
</img></div>
</body>
</html>Sounds like you want to give position:relative to #containerHa ha... I can't believe I missed that?
Thank you so much for taking the time to look and point that out for me.
ta,
jbw
My intention is to get the background image to stay centered and the mouseover images to always appear in the same place regardless of window size. Currently if you make the window larger or smaller the mouse over image moves. It seems to be relative to the window rather than the div it sits in?
Can anyone offer me some help?
ta,
jbw
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript" type="text/javascript">
<!--hide
function popup(width,height,link)
{
window.open(link,"popup","width=" + width + ",height=" + height + ",location=no,resizable=no,scrollbars=no");
}
//-->
// hide div
function hide(divid) { if (document.layers) document.layers[divid].visibility = 'hide';
else if (document.all) document.all[divid].style.visibility = 'hidden';
else if (document.getElementById) document.getElementById(divid).style.visibility = 'hidden';
}
// show div
function show(divid) { if (document.layers) document.layers[divid].visibility = 'show';
else if (document.all) document.all[divid].style.visibility = 'visible';
else if (document.getElementById) document.getElementById(divid).style.visibility = 'visible';
}
</script>
<style type="text/css">
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin:0px; padding:0px;
text-align:center;
background-color:#201418
}
#container {
width: 797px;
height: 559px;
margin:0px auto;
}
#arc {
visibility:hidden;
position:absolute;
background-color:#00FF00;
top: 0px;
left: 0px;
width: 150px;
height: 150px;
z-index: 2;
}
</style>
<body>
<div id="container"><img src=http://www.webdeveloper.com/forum/archive/index.php/"" alt="Background" width="787" height="599" border="0" usemap="#Map">
<div id="arc"> <a href=http://www.webdeveloper.com/forum/archive/index.php/"archive.htm" target="_self"><img src="" alt="" width="118" height="215" border=0 onMouseOver="show('arc');" onMouseOut="hide('arc');"></a> </div>
<map name="Map">
<area shape="rect" coords="136,67,260,269" onMouseOver="show('arc');" onMouseOut="hide('arc');">
<area shape="rect" coords="267,254,376,347" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="313,104,464,195" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="460,199,537,319" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="579,267,661,434" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
<area shape="rect" coords="393,344,471,496" href=http://www.webdeveloper.com/forum/archive/index.php/"#">
</map>
</img></div>
</body>
</html>Sounds like you want to give position:relative to #containerHa ha... I can't believe I missed that?
Thank you so much for taking the time to look and point that out for me.
ta,
jbw