Jump to content

CSS Hover trick


mistados
 Share

Recommended Posts

Hi everyone,I would like to achieve a certain effect, the effect i would like achieve is when someone hovers over our website logo, another 'almost' identical logo is loaded.I have created two logo images but one has a orange glow behind it, i woulf like this to be displayed when mour logo is hovered over.This website has done a similar thing i believe on their logo except that rather than a glow, theirs adds a graphic previously hidden:http://www.dzinerstudio.com/I am using Wordpress 3.1.2 if it matters.Many thanks if you can help.

Link to comment
Share on other sites

Well, there are two approaches.One would be to use an img tag and change the src attribute using JavaScript in the onmouseover/onmouseout events. (JavaScript can be disabled though, so you might not want this approach)Two is to use an arbitrary block element (like a div) as the image. Set the background as your logo, then use the :hover pseudo class to change the background image. Remember to use a proper doctype so that IE sees the :hover pseudo class on elements other than anchors.EDIT:Just thought of something regarding the second approach. You might consider making your logo image into a sprite. By that I mean you have one image that is twice as wide as your logo. You have both states of the logo in the single image, side by side. You'd then use the background position property to move the image when it's hovered. If you use two separate images, depending on file size and connection speed, there may be a lag before the image changes. (because the second image has to load first)

Edited by ShadowMage
Link to comment
Share on other sites

Im sorry but that went right over my head! i have very little coding experience. Could you go a bit slower for me?

Link to comment
Share on other sites

Hint. When a new image loads for the first time (which would happen at the first hover) there is a noticeable delay that users really hate. You can avoid this by using image sprites. The technique requires a little more work and some experimenting to get it right, but the results make it worth the trouble.

Link to comment
Share on other sites

Sure, our website can be accessed at www.proaudioheadz.comI did open up the style.css and do a search for 'logo' and this is the only code i found pertaining to it.

/* Top */#Top header	{ padding: 9px 0; }#Logo		{ float: left; margin: 0 15px 0 0; padding: 0; }#Logo a		{ display: block; width: 305px; height: 65px; background: transparent url(assets/images/logo.png) no-repeat 0 0; }#Logo a img	{ float: left; }#HeaderRight { float: right; }

Thank you for your time and patience..:)

Link to comment
Share on other sites

Well, it looks like you already have the makings for the CSS hover technique, so we'll go that way.First, did you create your sprite image yet? (See the edit in my first post in this topic, except I recommend making your image twice as tall with the different states stacked on top of each other)Once you have your sprite image, you'll need to remove the image tag. As in:<h1 id="Logo"><a style="background-image:none; width:auto; height:auto;" href="http://proaudioheadz.com"><img width="479" height="60" alt="ProAudioHeadz | Audio Design Specialists" src="http://proaudioheadz.com/wp-content/uploads/images/logo.png"></a></h1>So your left with just:<h1 id="Logo"><a style="background-image:none; width:auto; height:auto;" href="http://proaudioheadz.com"></a></h1>That's all you need to do with the HTML. In the CSS, you'll need to do a couple things. You already have the link element set to be a block element which is good. You'll need to set the image as the background of the anchor tag. (What is the current background image on the link for? Can it be moved to the h1 tag?)

#Logo a {   display: block;   width: 305px; /* You might need to adjust width and height to fit your image */   height: 65px;   background: url(http://proaudioheadz.com/wp-content/uploads/images/logo.png) no-repeat 0 0;}

Ok, here's the important part:You'll need to define a hover for the link and then change the background position to show the hover state of your logo:

#Logo a:hover {   background-position: 0 60px; /* You might have to adjust these values */}

Link to comment
Share on other sites

Wow, what a very detailed and clear answer! thanks so much for your help. You say i need to remove the image tag! and thats all i have to do with the HTML, what file would i edit to achieve this? im guessing it wouldnt be te css file?

Link to comment
Share on other sites

Wow, what a very detailed and clear answer! thanks so much for your help. You say i need to remove the image tag! and thats all i have to do with the HTML, what file would i edit to achieve this? im guessing it wouldnt be te css file?
No you would not edit the CSS. I'm guessing it's probably going to be named index.html or index.php.If you want to take the JavaScript route, you don't have to edit the HTML to remove the image tag. However, if you want to avoid the lag between the image change on the first hover, you'll need to preload the images. Preloading is something I've never done, and I'm not 100% sure how it's done, though if you wanted to take this route I'm sure I can piece it together enough to make it work. It's up to you.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...