BrotherArnold
Technical User
I'm trying to change a DIV's background image when I hover over a text link that is on top of that background image. I will have several links over that background image and each one will display a different background image when the mouse hovers over it and then it returns back to the original image when the mouse moves off the link. I'm beginning to think I can't solve this in CSS and I've avoided JavaScript so far because I'm not familiar with it. The code below provides a sample set up but the background image partially appears as background to the text link not the div. Although that is obviously wrong I don't know how to correct it in CSS.
Any help gratefully received.
And the CSS...
Cheers
Brother Arnold
"keep passing the open windows..."
Any help gratefully received.
HTML:
[<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>
<div class="sitemap">
<div class="home">
<a href="#">Home</a>
</div>
<div class="links">
<a href="#">Links</a>
</div>
</div>
</body>
</html>And the CSS...
CSS:
@charset "utf-8";
/* CSS Document */
.sitemap{
background-image:url(Images/sitemap_bg.jpg);
background-repeat:no-repeat;
background-position:top center;
height:355px;
}
.home{
position: absolute;
margin:119px 0px 0px 232px;
}
.home a:hover{
background-image:url(Images/home_map.gif);
}
.links{
position: absolute;
margin:175px 0px 0px 77px;
}
.links a:hover{
background-image:url(Images/links_map.gif);
}Cheers
Brother Arnold
"keep passing the open windows..."