CSS menu -mouse over alternate image. 1

[aich69]

Hi all... [disclaimer]can I just mention I'm no CSS expert so go easy on me, I'm sure that the below code is not necessarily how everyone might do it and welcome any pointers[/disclaimer]

I have created a vertical navigation menu. Doing nothing, the background image is white with a yellow ball on the right of the block, when the mouse hovers over it changes to a blue ball.

What I would like to know is- can I have some of the mouse-over images change to something different, an alternate image, and if so, how would I go about it.

Thanks for looking

Here's my CSS code

.cssnav	{
position:relative;
font-family: papyrus, verdana, helvetica, sans-serif;
background-image: url(imgs/button_over.gif);
background-repeat: no-repeat;
display: block;
width: 180px;
height: 40px;
margin: 0; 
margin-bottom:0px;
padding: 0; 
}
.cssnav a {
display:block;
font-size: 16px;
width: 180px;
height: 40px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none; 
}
.cssnav img {width: 100%; height: 100%; border: 0; }
* html a:hover {visibility:visible}
.cssnav a:hover img{visibility:hidden}
.cssnav span {
position:absolute;
left:5px;
top:3px;
margin:0;
cursor: pointer;
}

...and here is my ul list code

</div>
<div id="sidebar">
<div class="cssnav"><a href="ourchalet.html"><img src="imgs/button.gif"><span>Our chalet</span></a></div>
<div class="cssnav"><a href="aboutus.html"><img src="imgs/button.gif"><span>About us</span></a></div>
<div class="cssnav"><a href="gallery.html"><img src="imgs/button.gif"><span>Gallery</span></a></div>
<div class="cssnav"><a href="winter.html"><img src="imgs/button.gif"><span>Winter</span></a></div>
<div class="cssnav"><a href="summer.html"><img src="imgs/button.gif"><span>Summer</span></a></div>
<div class="cssnav"><a href="prices.html"><img src="imgs/button.gif"><span>Prices</span></a></div>
<div class="cssnav"><a href="availability.html"><img src="imgs/button.gif"><span>Availabilty</span></a></div>
<div class="cssnav"><a href="comments.html"><img src="imgs/button.gif"><span>Guest comments</span></a></div>
</div>
<div id="footer"><img src="imgs/ca-footer.png" width="960" height="80"></div>
</div>

I used to have a handle on life... but it broke. Cpt. Red Bull

 

[vacunita]

...and here is my ul list code

Where? There is no ul or li items there at all, only a bunch of divs with other elements inside.

What I would like to know is- can I have some of the mouse-over images change to something different, an alternate image, and if so, how would I go about it.

You can but you'd need to change your CSS and HTML a bit.

Currently it looks awfully complex and uses the visibility property rather strangely.

Personally, I'd do something like this:

.cssnav    {
position:relative;
font-family: papyrus, verdana, helvetica, sans-serif;
display: block;
width: 180px;
height: 40px;
margin: 0; 
margin-bottom:0px;
padding: 0; 
}

.cssnav a{
display:block;
[red]background-image: url(imgs/button.gif);
background-repeat: no-repeat;
background-position:left center;
[/red]
font-size: 16px;
width: 180px;
height: 40px;
float: left;
margin: 0;
padding: 0;
color: black; text-decoration: none; 
}

.cssnav a:hover{
background-image: url(imgs/button_over.gif);
background-repeat: no-repeat;
background-position:left center;
}


.altImg a:hover{
background-image: url(imgs/alternateimage.gif);
background-repeat: no-repeat;
background-position:left center;
}

and the HTML:

<div id="sidebar">
<div class="cssnav"><a href="ourchalet.html"><img src="imgs/button.gif"><span>Our chalet</span></a></div>
<div class="cssnav [red]altImg[/red]"><a href="aboutus.html"><img src="imgs/button.gif"><span>About us</span></a></div>
<div class="cssnav"><a href="gallery.html"><img src="imgs/button.gif"><span>Gallery</span></a></div>
<div class="cssnav"><a href="winter.html"><img src="imgs/button.gif"><span>Winter</span></a></div>
<div class="cssnav [red]altImg[/red]"><a href="summer.html"><img src="imgs/button.gif"><span>Summer</span></a></div>
<div class="cssnav"><a href="prices.html"><img src="imgs/button.gif"><span>Prices</span></a></div>
<div class="cssnav"><a href="availability.html"><img src="imgs/button.gif"><span>Availabilty</span></a></div>
<div class="cssnav"><a href="comments.html"><img src="imgs/button.gif"><span>Guest comments</span></a></div>
</div>
<div id="footer"><img src="imgs/ca-footer.png" width="960" height="80"></div>
</div>

The items with the "altImg" class added to the class value will have a different image when hovered over.


----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[aich69]

...and here is my ul list code

You're quite right, there weren't any...I've tried so many things over the past few days I'm slightly dazed and confused.

Thank you for a clear and comprehensive answer..it really is appreciated. I'm trying to learm so much in a relatively short space of time and this has helped loads.

I used to have a handle on life... but it broke. Cpt. Red Bull

 

[aich69]

Implemented today with several altImg classes and it's working perfectly.

Thanks again

I used to have a handle on life... but it broke. Cpt. Red Bull

 

[vacunita]

Glad it worked.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech