CodingForums.com - Need help with CSS menu when hovered over

CodingForums.com (http://www.codingforums.com/index.php)

- HTML & CSS (http://www.codingforums.com/forumdisplay.php?f=13)

- - Need help with CSS menu when hovered over (http://www.codingforums.com/showthread.php?t=248344)

Need help with CSS menu when hovered over

Greetings!

I need a little push here! I'm trying to do this css based menu which seems all to simple but I've hit that proverbial mental road block! :(

I haven't written any code for it yet for the simple fact that I really don't know where to start!

What I want to do is on hover change the image to an animated image (which I already have) and perhaps change the color of the text at the same time.

This is the code I have in my head for the line item I just really don't know how to put the CSS down.

Code:

<ul id="menu">

      <li><a href="#" title=""><img src="static_soccer_ball.gif">Item #1</a></li>

</ul>

I'd rather do this in CSS than to bust out Gimp and make an image for each menu item. This makes changing the menu at any give time much easier! :eek:

I hope somebody can give me this little push! Thank so very much way in advance! :)

Good morning MrBiggZ,
You could do this the same way you build a normal sprite rollover but with seperate images. It would have a hesitation between it's normal and hover states though, that's why we use sprites.
Maybe find an image preloader to go along with this.

Start with something like this maybe -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Untitled Document</title>

<style type="text/css">

html, body {

        margin: 0;

        background: #fc6;

}

#container {

        width: 800px;

        margin: 30px auto;

        background: #999;

        overflow: auto;

}

#menu {

        height: 35px;

        width: 600px;

        margin: 0 auto;

        padding: 0;

        background: #99CCCC;

        list-style: none;

}

        #rollover1 {

                line-height: 35px;

                width: 100px;

                float: left;

                text-align: center;

        }

                #rollover1 a:link,

                #rollover1 a:visited {

                        height: 30px;

                        width: 100px;

                        display: block;

                        background: url(static_soccer_ball.gif);

                }

                #rollover1 a:hover,

                #rollover1 a:active {

                        background: url(hovered_soccer_ball.gif);

                        color: #f00;

                }

</style>

</head>

<body>

    <div id="container">

        <ul id="menu">

                <li id="rollover1"><a href="#" title="">Item #1</a></li>

        </ul>

    <!--end container--></div>

</body>

</html>

Thank you!!!!!!!!

Very very very close to what I had in my head! The rest I can do simple enough!