CSS rollover effect on images 2

[DrySnot]

I am trying to replace javascript with this and I'm having trouble getting my personal settings plugged into it.

When my page page is loaded I want it to display this image

http://www.drysnot.com/menuimages/forums_off.gif

when you mouse over the image I want it to change to this one

http://www.drysnot.com/menuimages/forums_on.gif

Could you please show me how I add in the 2nd image that displays when you mouse over.

<div class="rollover">
<p>
<a href="forums"><img src="menuimages/forums_off.gif" width="134" height="94" border="0"></a>
</p>
</div>

<style type="text/css">
<!--
.rollover a { display:block; width:32px; background-color: #000000}
.rollover a:hover { background-color: #000000}
-->
</style>

Thank you so much for the help

 

[vacunita]

Since You can only target object properties with CSS. Getting it to work the way you want it to, means you'll need to change your html a bit. Here this should do what you want:

a:link, a:visited{
display:block;
width:xxx px;
height:yyy px;
background:url(
\path\to\image.jpg);
}
a:active, a:hover{
background:url(path\to\otherimage.gif);
display:block;
width:xxx px;
height:yyy px;
}

<a href="forums"></a>

change xxx and yyy to match the dimensions of your image. and change the \path\to\image to match the location of your images

----------------------------------
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.

 

[kaht]

Do take note that if you use vacunita's example that changing the anchor to a block level element may screw up your display. Some floating may become necessary to get it to behave more like an inline element.


It's a shame that inline-block display isn't more supported....

-kaht

Lisa, if you don't like your job you don't strike. You just go in every day and do it really half-assed. That's the American way. - Homer Simpson

[small]<P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <B> <P> <.</B>[/small]

 

[DrySnot]

Thank you so much for the help.


I'm just learning how to do all this but would it be any better doing it this way?

i.e.
.rollover a { background:#000 url(menuimages/forums_off.gif); ...}
.rollover a:hover { background:#000 url(menuimages/forums_on.gif); ...}

 

[vacunita]

Its basically the same thing. In your example you would need to have the links inside an object (DIV, header, etc..) with a class of rollover.

In my example, you address the links directly.

The usage would really depend on whether you have other links that don't require that styling. If so its better to be more specific. Son only links with in that object get that styling.

Both ways, require the display:block so they work correctly.









----------------------------------
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.

 

[DrySnot]

Thank you so much for your advice it worked amazing!