Image Rollover in CSS + Hyperlink

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

I want to create a CSS style sheet so I can use one "image" as a hyperlink
with a different "image" on hover. I don't want to use DHTML, but instead
want to use ONLY a style sheet. Can anybody give me an example or two on how
to write the code for the CSS?
 
Not possible with just CSS.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
 
This works for me - try it.

CSS=
div#navigation
{
float: left;
width: 125px;
padding-top: 2em;
border-right: 1px;
}
div#navigation ul
{
list-style-type: none;
padding: 4px;
margin: 0;
}
div#navigation ul li { margin-top: 8px; }
#navigation ul li a
{
display: block;
width: 125px;
padding: 3px 5px 3px 10px;
text-decoration: none;
color: white;
background-image: url(button_up.gif);
background-repeat: repeat-y;
}
#navigation ul li a:hover
{
color: blue;
background-image: url(button_dn.gif);
background-repeat: repeat-y;
}

and then on your page after <body> put:

<div id="navigation">
<ul>
<li><a href="index.html" title="Home"><b>Home</b></a></li>
<li><a href="info.html" title="Info"><b>Info</b></a></li>
<li><a href="news.html" title="News"><b>News</b></a></li>
<li><a href="links.html" title="Links"><b>Links</b></a></li>
<li><a href="contact.html" title="Contact"><b>Contact</b></a></li>
</ul>
</div>
 
Back
Top