Web Trick: Images Rollovers without Javascript

FunkyFresh · 13-June-05, 03:59 PM

Heard about some neat code that'll let you do image rollovers without writing a line of Javascript (or VBScript, for that matter). Basically, it sets one image as a background and uses CSS's ":hover" property to show or hide an image in front of it. Works equally well in IE or Firefox.

See it in action

Here's the code:

index.htm

Code:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="rollover.css">
</head>
<body>
  <a href="#top" id="funky" class="rollover"><img src="funky.gif"></a>
  <a href="#top" id="fresh" class="rollover"><img src="fresh.gif"></a>
</body>
</html>

rollover.css

Code:

.rollover { display: block; }
.rollover img { width: 100%; height: 100%; border: 0; }
.rollover:hover { visibility: visible; }
.rollover:hover img { visibility: hidden; }

#funky {
  background-image: url(funky_selected.gif);
  width: 100px;
  height: 50px;
}

#fresh {
  background-image: url(fresh_selected.gif);
  width: 100px;
  height: 50px;
}

For the sake of space, I stripped out the comments, though they're available in the example files I used. Thanks to redmelon.net for the idea & code!

TYCOON · 13-June-05, 04:16 PM

HOLY SHYT! This is over my head x3. But il give you a rep becuase it sounds like it will help others

Fatsobob · 13-June-05, 04:40 PM

Woot!
You da man Funky!
I think I will use this a little more often.
Thank you alot.
BLING BLING!

Foe · 13-June-05, 04:50 PM

Very good find FF, and thanks for shring it.

subdismal · 13-June-05, 05:19 PM

Quote:

Originally Posted by FunkyFresh


	Basically, it sets one image as a background and uses CSS's ":hover" property to show or hide an image in front of it.

Sneaky, sneaky. There's all sorts of little 'Web tricks', and that's definitely one of the slickest ones I've saw. Bling for sharing!

CubanConnectionZ · 09-August-05, 05:00 PM

That is a neat lil web trick I must agree.

13-June-05, 03:59 PM		#1 (permalink)
FunkyFresh 'Da Doctor of Funk	Web Trick: Images Rollovers without Javascript Heard about some neat code that'll let you do image rollovers without writing a line of Javascript (or VBScript, for that matter). Basically, it sets one image as a background and uses CSS's ":hover" property to show or hide an image in front of it. Works equally well in IE or Firefox. See it in action Here's the code: index.htm Code: <html> <head> <link rel="stylesheet" type="text/css" href="rollover.css"> </head> <body> <a href="#top" id="funky" class="rollover"><img src="funky.gif"></a> <a href="#top" id="fresh" class="rollover"><img src="fresh.gif"></a> </body> </html> rollover.css Code: .rollover { display: block; } .rollover img { width: 100%; height: 100%; border: 0; } .rollover:hover { visibility: visible; } .rollover:hover img { visibility: hidden; } #funky { background-image: url(funky_selected.gif); width: 100px; height: 50px; } #fresh { background-image: url(fresh_selected.gif); width: 100px; height: 50px; } For the sake of space, I stripped out the comments, though they're available in the example files I used. Thanks to redmelon.net for the idea & code!

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Slashdot // Mozilla Extending Javascript?	Gizmo	Slashdot RSS	0	29-May-05 03:14 AM
Javascript/HTML assistance on sound...	Rob	Coding / Scripting / Programming	1	10-October-04 10:45 PM
Any JavaScript pimps in here??	NapalmStixToKidz	Coding / Scripting / Programming	10	03-August-04 06:15 PM
JavaScript and Fifrebird	Spc. Forces Bob	Other PC Problem / Help	0	05-January-04 04:18 PM
Plz help if you know JavaScript	Lazy8s	Anything Goes	8	24-January-03 06:56 PM

13-June-05, 04:16 PM		#2 (permalink)
TYCOON Apex Tech God	HOLY SHYT! This is over my head x3. But il give you a rep becuase it sounds like it will help others

13-June-05, 04:40 PM		#3 (permalink)
Fatsobob Apex's Squirrel Revolutionary	Woot! You da man Funky! I think I will use this a little more often. Thank you alot. BLING BLING!

13-June-05, 04:50 PM		#4 (permalink)
Foe Apex Tech God	Very good find FF, and thanks for shring it.

09-August-05, 05:00 PM		#6 (permalink)
CubanConnectionZ Apex Tech God	That is a neat lil web trick I must agree.