Search code examples
htmlcssrollovers

CSS Image Rollovers

<div id="navigation>
    <ul class="navlist">
        <li><img src="images/btn1.gif"/></li>
        <li><img src="images/btn2.gif"/></li>
        <li><img src="images/btn3.gif"/></li>
    </ul>
</div>

How would I be able to give these "buttons" within the list rollover states without using JS? I'm totally drawing a blank...

These links must be images.

Solution

  • If you're supporting newer browsers (browsers that support the :hover selector on all elements, which is basically everything except IE6, see here) you can do this with CSS provided you change your HTML. You will need to remove the img tags, and instead use background images.

    CSS (this is the simple example with 2 images, you'll need to set the height + width. If you have many different images, you'll need a css class for each of them):

    <style type="text/css">
    .navlist li { width: 32px; height: 32px; background-repeat: no-repeat; background-image: url('images/image1.gif'); }
    .navlist li:hover { background-image: url('images/image2.gif'); }
</style>

    HTML:

    <div id="navigation">
    <ul class="navlist">
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>