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>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

css page problems 2
problem with repeating css graphic 3
CSS page 8
CSS help 2
Keeping CSS out of a table 14
How to kill underlining in links 2
Page Options for whole stie 1
Link in CSS 1

Back
Top