How do you make a CSS image rollover?

Dev Shed Forums Sponsor:

January 6th, 2003, 04:50 PM

webkid_01

Junior Member

Join Date: Jan 2003

Posts: 9

Time spent in forums: < 1 sec
Reputation Power: 0

How do you make a CSS image rollover?

I need to know how to make a CSS rollover that swaps only 2 images, just like the javascript rollovers. Only I haerd CSS took less coding, thats why I'm asking!!!!!!!!!

January 6th, 2003, 05:33 PM

binky

Contributing User

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Oct 2001

Location: New Zealand

Posts: 1,774

Time spent in forums: 1 Day 58 m 15 sec
Reputation Power: 23

Something like:

<html>
<head>
<style type='text/css'>
a.rollover{background-image:url('blueSquare.gif'); width:20px; height:20px;}
a.rollover:hover{background-image:url('redSquare.gif'); width:20px; height:20px;}
</style>
</head>
<body>
<a class='rollover' href='#'></a>
</body>
</html>

You can use background-repeat and y/x positions to create a single background image for the rollovers.

__________________
Smartfone Warehouse

January 8th, 2003, 04:18 PM

webkid_01

Junior Member

Join Date: Jan 2003

Posts: 9

Time spent in forums: < 1 sec
Reputation Power: 0

Thanks

Thanks Blinky, you're a pal!!!

Viewing: Dev Shed Forums > Web Design > CSS Help > How do you make a CSS image rollover?

« Previous Thread | Next Thread »

Developer Shed Advertisers and Affiliates

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread:

Posting Rules
You may not post new threads You may not post replies You may not post attachments You may not edit your posts vB code is On Smilies are On [IMG] code is On HTML code is Off

View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox

Forum Jump