Web Design Forums

Accurate · 17-04-2006, 09:15

Until now I've used terribly messy dreamweaver code for rollover images.

Does anyone know the code for a simple mouse over rollover image in css/html ?

Scott · 17-04-2006, 09:28

this help?

http://alistapart.com/articles/rollovers

pgo · 17-04-2006, 11:50

http://wellstyled.com/css-nopreload-rollovers.html

Accurate · 17-04-2006, 12:03

Ok thanks lads - i'll give it a shot.

Accurate · 17-04-2006, 12:15

Not having much success. Hopefully one of you will be able to identify the problem.

I've created a 1.jpg and a 2.jpg (1 being its normal state, and 2 when the mouse rolls over). It isn't working, however, I experimented with text, and on the mouse over it works... but I'm obviously doing something wrong.

Here is my code -

(thanks)

Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
#menu a {
   background: url("1.jpg") top left no-repeat;
   }
#menu a:hover {
   background-image: url("2.jpg");
   }
   }
</style>

<body>
<div id="menu">
	<a href=""><img src="1.jpg" width="287" height="150"></a>
	<a href="">test with text</a>
</div>
</body>
</html>

Accurate · 17-04-2006, 14:14

Anyone around? Could do with sorting this out this evening.

pgo · 17-04-2006, 15:05

You're displaying that image 3 times, once in the img tag, once in the first a, once in the second a.

Try:

Code:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
#menu a {
   background: url("1.jpg") top left no-repeat;
   display: block;
   height: (height-of-image)px;
   width: (width-of-image)px;
   }
#menu a:hover {
   background-image: url("2.jpg");
   }
   }  <--- Remove that, where'd it come from?.
</style>

<body>
<div id="menu">
	<a href="#">test with text</a>
</div>
</body>
</html>

You should really be using the link I showed. 2 states in one image will eliminate the flicker on rollover.

Accurate · 18-04-2006, 09:06

oK thats great. Got the code working..

However, I want it to be just an "image rollover".. not image rollover on text. How do I get rid of the text but still allow the images to rollover?

Accurate · 18-04-2006, 09:27

Is this the right way? or a bodge?

<div id="menu">
<a href="#"> </a>

Then applying text-decoration none in the css ?

Surely its a bodge...

captainK · 18-04-2006, 10:20

Stick your text within span tags and add this style:

#menu span{
display:block;
width:0;
height:0;
overflow:hidden;
}

pgo · 18-04-2006, 11:49

Use image replacement like captainK suggests. You'll have to give each <a> an id or class to feed it its own background image.

Accurate · 18-04-2006, 14:42

Quote:

Originally Posted by captainK

Stick your text within span tags and add this style:

#menu span{
display:block;
width:0;
height:0;
overflow:hidden;
}

I don't want any text, I just want mouse roll overs on an image... so its normal state as 1.jpg and then rollover 2.jpg

Any idea?

Accurate · 18-04-2006, 17:23

Bit of a bump. Sorry to be a pain.

seen.to · 19-04-2006, 00:48

Quote:

Originally Posted by Accurate

I don't want any text, I just want mouse roll overs on an image... so its normal state as 1.jpg and then rollover 2.jpg

Any idea?

But you still want to put text in there then hide it for accessibility/SEO purposes.

Accurate · 19-04-2006, 05:29

Oh right. Let me see then if that works then!

Accurate · 20-04-2006, 09:35

This works, is my code ok though?

Code:

<html>
<head>
<title>Mouse Over test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<style type="text/css">
#menu a {
   background: url("1.jpg") top left no-repeat;
   display: block;
   height: 205 px;
   width: 205 px;
   text-decoration: none;

   }
#menu a:hover {
   background-image: url("2.gif");
   text-decoration: none;
   }
</style>

<body>
<div id="menu">
	<a href="#">&nbsp;</a>
</div>
</body>
</html>

pgo · 20-04-2006, 10:48

Yeah, but if you use image replacement, you'll have a text alternative.

17-04-2006, 09:15	#1 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Rollover image css code Until now I've used terribly messy dreamweaver code for rollover images. Does anyone know the code for a simple mouse over rollover image in css/html ? __________________ decent web hosting - www.balue.com .

17-04-2006, 09:28	#2 (permalink)
Scott sanddancer Join Date: Feb 2004 Location: South Shields Posts: 2,990	this help? http://alistapart.com/articles/rollovers __________________ flick me

17-04-2006, 12:03	#4 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Ok thanks lads - i'll give it a shot. __________________ decent web hosting - www.balue.com .

17-04-2006, 12:15	#5 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Not having much success. Hopefully one of you will be able to identify the problem. I've created a 1.jpg and a 2.jpg (1 being its normal state, and 2 when the mouse rolls over). It isn't working, however, I experimented with text, and on the mouse over it works... but I'm obviously doing something wrong. Here is my code - (thanks) Code: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <style type="text/css"> #menu a { background: url("1.jpg") top left no-repeat; } #menu a:hover { background-image: url("2.jpg"); } } </style> <body> <div id="menu"> <a href=""><img src="1.jpg" width="287" height="150"></a> <a href="">test with text</a> </div> </body> </html> __________________ decent web hosting - www.balue.com .

17-04-2006, 14:14	#6 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Anyone around? Could do with sorting this out this evening. __________________ decent web hosting - www.balue.com .

17-04-2006, 11:50	#3 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	http://wellstyled.com/css-nopreload-rollovers.html

18-04-2006, 09:06	#8 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	oK thats great. Got the code working.. However, I want it to be just an "image rollover".. not image rollover on text. How do I get rid of the text but still allow the images to rollover? __________________ decent web hosting - www.balue.com .

18-04-2006, 09:27	#9 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Is this the right way? or a bodge? <div id="menu"> <a href="#"> </a> Then applying text-decoration none in the css ? Surely its a bodge... __________________ decent web hosting - www.balue.com .

18-04-2006, 10:20	#10 (permalink)
captainK Registered User Join Date: Dec 2005 Location: Leeds Posts: 56	Stick your text within span tags and add this style: #menu span{ display:block; width:0; height:0; overflow:hidden; }

18-04-2006, 11:49	#11 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Use image replacement like captainK suggests. You'll have to give each <a> an id or class to feed it its own background image.

18-04-2006, 17:23	#13 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Bit of a bump. Sorry to be a pain. __________________ decent web hosting - www.balue.com .

19-04-2006, 05:29	#15 (permalink)
Accurate Accurate Join Date: Feb 2003 Location: UK Posts: 1,311	Oh right. Let me see then if that works then! __________________ decent web hosting - www.balue.com .

20-04-2006, 10:48	#17 (permalink)
pgo Senior Member Join Date: Jan 2005 Posts: 12,340	Yeah, but if you use image replacement, you'll have a text alternative.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search