Need help with CSS menu when hovered over

MrBiggZ · 01-09-2012, 02:30 PM

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!

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

Excavator · 01-09-2012, 03:19 PM

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>

MrBiggZ · 01-09-2012, 05:06 PM

Thank you!!!!!!!!

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