CSS rollover effect with two graphics

nihimetal · June 22nd, 2006, 4:20 PM

Hey all,

I'm new to the block. I've had my hosting purchased for about 4 months or so, but just now getting the free time to begin playing. I've created my first site with CSS. It hasn't been difficult so far and I love how the code is rather clean looking.

I've got a banner that I want to add a rollover effect to with another image of the exact same dimensions. Here's a snippet of what my index looks like:

Code:

<link href="Files/layout.css" rel="stylesheet" type="text/css" /></head>

	<body>
		<div id="mBody">
			<div id="mHeader"></div>

And my layout file:

Code:

body
{
	background: #000000;
}

#mBody
{
	margin: 0 auto;
	width: 950px;
	border: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 9pt;
	color:#CCCCCC;
}

#mHeader
{
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	height: 90px;
	background:url(Images/90x940Header.gif) no-repeat;
	color: #006666;
}

As you see, I have a call out to 90x940Header.gif . I want it to switch to 90x940Header2.gif on rollover.

I'm not sure if the way I went about this is good or not, but it works. I've googled and searched these forums for multiple resources concerning this, but none of the examples are exactly like this. Primarily examples of changing the background color or something to keep one single image.

Can someone help point me in the right direction on how I can accomplish this? Thanks.a

**Kickersny.com** · June 22nd, 2006, 5:53 PM

Code:

#mHeader:hover
{
	background:url(Images/90x940Header2.gif) no-repeat;
}

H · June 22nd, 2006, 5:57 PM

In most browsers it will require a loading of the second image when you trigger the hover event. It's more practiced to have the images as one file, then change the position of the background to have the second image in view.

**Kickersny.com** · June 22nd, 2006, 6:32 PM

THEN WRITE IT OUT, SMARTYPANTS!

Just kidding. Get back on IRC; I miss #surpass in its glory days.

H · June 22nd, 2006, 7:02 PM

I'll write it out when I get home. Don't want to spend too much time on the forum at work.

nihimetal · June 23rd, 2006, 12:04 AM

Yeah, write it out!! I'm j/k of course. Thank you for the input. I'll try to figure out how to make it into one image. Is the basic concept that on rollover, the background changes? I'll google more. BTW, the code suggested worked just fine, but I want to try and follow suggested standards if possible. Thanks again.

H · June 23rd, 2006, 12:35 AM

Basically this is it:

Code:

#mHeader {
	margin-left: 5px;
	margin-right: 5px;
	margin-bottom: 10px;
	height: 90px;
	background:url(Images/90x940Header.gif) 0px 0px no-repeat;
	color: #006666;
}
#mHeader:hover {
	background-position: -85px 0px;
}

This is what you'd do if you had your images side-by-side. The 85px would be replaced by whatever your width is for one state.

nihimetal · June 26th, 2006, 3:02 PM

Thanks for the input. I'm getting my PS friend (I'm horrible with it) to set it up the image for me. The loading of the other img is entirely too obvious of a transition.

You guys are great.

**GamingHybrid** · July 3rd, 2006, 11:22 PM

I think I found out why my CSS rollovers dont work in all browsers :P Thanks.

June 22nd, 2006, 4:20 PM	#1 (permalink)
nihimetal Registered User Fresh Surpasser Joined in Nov 2004 3 posts Gave thanks: 0 Thanked 0 times	CSS rollover effect with two graphics Hey all, I'm new to the block. I've had my hosting purchased for about 4 months or so, but just now getting the free time to begin playing. I've created my first site with CSS. It hasn't been difficult so far and I love how the code is rather clean looking. I've got a banner that I want to add a rollover effect to with another image of the exact same dimensions. Here's a snippet of what my index looks like: Code: <link href="Files/layout.css" rel="stylesheet" type="text/css" /></head> <body> <div id="mBody"> <div id="mHeader"></div> And my layout file: Code: body { background: #000000; } #mBody { margin: 0 auto; width: 950px; border: 1px solid #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color:#CCCCCC; } #mHeader { margin-left: 5px; margin-right: 5px; margin-bottom: 10px; height: 90px; background:url(Images/90x940Header.gif) no-repeat; color: #006666; } As you see, I have a call out to 90x940Header.gif . I want it to switch to 90x940Header2.gif on rollover. I'm not sure if the way I went about this is good or not, but it works. I've googled and searched these forums for multiple resources concerning this, but none of the examples are exactly like this. Primarily examples of changing the background color or something to keep one single image. Can someone help point me in the right direction on how I can accomplish this? Thanks.a

June 22nd, 2006, 5:53 PM	#2 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	Code: #mHeader:hover { background:url(Images/90x940Header2.gif) no-repeat; } __________________ - Evan Charlton \| [site] \| Server - SH58

June 22nd, 2006, 6:32 PM	#4 (permalink)
Kickersny.com Surpass Fan Super #1 Joined in Aug 2004 Hosted on SH58 1,688 posts Gave thanks: 6 Thanked 7 times	THEN WRITE IT OUT, SMARTYPANTS! Just kidding. Get back on IRC; I miss #surpass in its glory days. __________________ - Evan Charlton \| [site] \| Server - SH58

June 23rd, 2006, 12:35 AM	#7 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,092 posts Gave thanks: 48 Thanked 131 times	Basically this is it: Code: #mHeader { margin-left: 5px; margin-right: 5px; margin-bottom: 10px; height: 90px; background:url(Images/90x940Header.gif) 0px 0px no-repeat; color: #006666; } #mHeader:hover { background-position: -85px 0px; } This is what you'd do if you had your images side-by-side. The 85px would be replaced by whatever your width is for one state.

July 3rd, 2006, 11:22 PM	#9 (permalink)
GamingHybrid Bow before Surpass! Super #1 Joined in Sep 2004 1,547 posts Gave thanks: 91 Thanked 49 times	I think I found out why my CSS rollovers dont work in all browsers :P Thanks. __________________ Wii Hotspot - Upcoming project! -http://www.wiihotspot.com Make a cPanel Login Form \| Why is my Account Suspended?

June 22nd, 2006, 5:57 PM	#3 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,092 posts Gave thanks: 48 Thanked 131 times	In most browsers it will require a loading of the second image when you trigger the hover event. It's more practiced to have the images as one file, then change the position of the background to have the second image in view.

June 22nd, 2006, 7:02 PM	#5 (permalink)
H after g, before i Resident. Joined in Jul 2004 Lives in N,BC,CA 8,092 posts Gave thanks: 48 Thanked 131 times	I'll write it out when I get home. Don't want to spend too much time on the forum at work.

June 23rd, 2006, 12:04 AM	#6 (permalink)
nihimetal Registered User Fresh Surpasser Joined in Nov 2004 3 posts Gave thanks: 0 Thanked 0 times	Yeah, write it out!! I'm j/k of course. Thank you for the input. I'll try to figure out how to make it into one image. Is the basic concept that on rollover, the background changes? I'll google more. BTW, the code suggested worked just fine, but I want to try and follow suggested standards if possible. Thanks again.

June 26th, 2006, 3:02 PM	#8 (permalink)
nihimetal Registered User Fresh Surpasser Joined in Nov 2004 3 posts Gave thanks: 0 Thanked 0 times	Thanks for the input. I'm getting my PS friend (I'm horrible with it) to set it up the image for me. The loading of the other img is entirely too obvious of a transition. You guys are great.

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
Rate This Thread
Rate This Thread: