Image Rollover in CSS + Hyperlink

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?
 
J

Jens Peter Karlsen [FP-MVP]

Not possible with just CSS.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
 
G

Guest

Any suggestions?
--
Thanks a million. Michelle


Jens Peter Karlsen said:
Not possible with just CSS.

Regards Jens Peter Karlsen. Microsoft MVP - Frontpage.
Click to expand...
 
G

Guest

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

problem with repeating css graphic 3
css page problems 2
CSS help 2
CSS page 8
usemap and CSS 2
Hyperlink Rollover Effects 4
Link in CSS 1
css background image 10

Top