[SOLVED] CSS Rolover Effect on Images

[NovaArgon]

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

[NovaArgon]

Is there a different file for CSS?

 

I have the code but its displaying text on my page or its just in the wrong spot.

 

 

This is HTML

 

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

 

This is CSS

 

a:link, a:visited{

display:block;

width:134 px;

height:94 px;

background:url(

\menuimages\forums_off.gif);

}

a:active, a:hover{

background:url(menuimages\forums_on.gif);

display:block;

width:134 px;

height:94 px;

}

[NovaArgon]

I was unable to edit the first post on these forums but this is the answer to the question: How do you add the roll over effect to your page using css.

 

 

1: Create a file named style.css with this code inside

 

a:link, a:visited{
display:block;
width:###px;
height:###px;
background:url(
/your/pic/location.gif);
}
a:active, a:hover{
background:url(/your/pic/location.gif);
display:block;
width:###px;
height:###px;
}

 

2: Replace the ### with the px of your image eg 200px then replace the /your/pic/location.gif with your image path.

 

3: In your index.html inside the head you need a link to your style.css sheet

<link rel="stylesheet" href="style.css" type="text/css" media="screen">

 

4: In your index.html file should have this code inside the body

<div class="rollover"><a href="Path/to/goto/when/clicked"></a></div>

 

I think thats it if I missed something I hope a mod will fix it