Forum Moderators: not2easy
I would like to display a css image map (in place of my normal background) when the mouse hovers over any part of the main page.
I have tried doing this with 2 alternate backgrounds so when someone hovers over any part of the main page all the links should appear and the image map should begin working...
Unfortunately it partially works but gets hung up in both IE6+ and FF2...
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site Name</title><style type="text/css" media="screen">
body {
background-color: #dbd3be;
margin: 0;
padding: 0;
}
#wrap {
position:relative;
width:650px;
height:488px;
margin:0px auto;
}
#main {
background-image: url(images/home_main.png);
width: 650px;
height: 488px;
}
#main a:hover {
background-image: url(images/home_main_over.png);
top:0; left:0;
width:650px;
height:488px;
}
#menu a {
position: absolute;
width: 650px;
height: 488px;
top: 0px;
text-decoration: none;
}
#menu a i { visibility: hidden; }
a#store {top: 5px; left:5px; width:640px; height: 112px;}
a#contact {top:122px; left:477px; width:168px; height:191px;}
a#exhibition {top:320px; left:231px; width:418px; height:165px;}
a#press {top:320px; left:5px; width:221px; height:165px;}
a#about {top:122px; left:5px; width:140px; height:191px;}
a#home {top:122px; left:150px; width:322px; height:191px;}
#copyright { text-align:center; color:#fff }
</style>
</head>
<body>
<div id="wrap">
<div id="main">
<div id="menu">
<a href="#" id="home"><i>Home</i></a>
<a href="store.html" id="store"><i>Store</i></a>
<a href="contact.html" id="contact"><i>Contact</i></a>
<a href="exhibition.html" id="exhibition"><i>Exhibition</i></a>
<a href="press.html" id="press"><i>Press</i></a>
<a href="about.html" id="about"><i>About</i></a>
</div>
</div>
<p id="copyright">Copyright © 2007 Site Name</p>
</div>
</body>
</html>
Any feedback would be appreciated.
[edited by: Xapti at 12:40 am (utc) on Aug. 3, 2007]
I have a simple background picture and when someone hovers over the background I would like a slightly different background to replace the original one - and the new one will included pictures of elements that I need to section apart into an image map.
Currently I am using CSS coordinates and absolute positioning but when someone hovers over a link that link takes up the entire page - so the other links become disabled...
hope that clarifies things. I can send a real link via email if you want to see the real page.
Thanks
If you don't want the hovered link to take up the entire page's space, why did you add this code?
#main a:hover {
top:0; left:0;
width:650px;
height:488px;
}
cause that's what's doing it.
If you want the background of the parent container to change any time any 1 of the links is hovered, you'll either have to use javascript, or go
#main:hover{background-image: url(images/home_main_over.png)}
Which won't be supported by IE6 (without a javascript fix) because it only supports :hover for links.
