Jump to content
Sign in to follow this  
rkazantsev

Change hover over image

Recommended Posts

rkazantsev

Hi guys I have created a image that I want to appear when I hover over my navigation bars my site is www.UFCReplay.com and I want to have that image appear when I hover over About Us, Contact Us, Log Out and Sponsors and Partners. I can save the image as a png in the images folder but where in the code to I write to point to the image when hovering over it also what do I write sorry guys I dont know php or css this maybe a very easy one but very difficult for me. olkQb.pngolkQb.png

Share this post


Link to post
Share on other sites
cmunns

It looks like you've started out right with this css ` #nav li a:hover { background:URL('images/image.png') no-repeat top left transparent; } ` You just need to find the path to the image. Do you have a url to the image?

Share this post


Link to post
Share on other sites
rkazantsev

Hi cmunns The url to the image is http://www.ufcreplay.com/wp-content/uploads/2010/12/hover-over.png'>http://www.ufcreplay.com/wp-content/uploads/2010/12/hover-over.png so would the code be #nav li a:hover { background:URL('http://www.ufcreplay.com/wp-content/uploads/2010/12/hover-over.png'>http://www.ufcreplay.com/wp-content/uploads/2010/12/hover-over.png ') no-repeat top left transparent; } Also where am I dropping the code in the header.php and does it matter where i place the code? Thank You Ruben

Share this post


Link to post
Share on other sites
rkazantsev

Thank you Bryan it did it but its completely out of alignment do i need to have the buttons a specific size? Also it doesn't look's like the button is behind the page so the pointing arrow will not show even if i get the size correct. If you go to www.ufcreplay.com you can see it

Share this post


Link to post
Share on other sites
Kate

Hey Ruben - Yes, setting the width/height to 138x66 will allow the entire image to be seen. You'll have to account for padding as well, so please keep that in mind. (Whatever you add for padding needs to be subtracted from the height and/or width.) For instance: if you set a padding of 10px on either side, your width should now be 118 (138px - 20px). Hope that makes sense.

Share this post


Link to post
Share on other sites
rkazantsev

Thanks Kate that still didnt do it but I removed it. I think it will be more trouble than its worth and I thought the blue would look cool but was the same blue as the header.... Plus I have UFC fight coming up in a few days so I really dont want to do to much with the site right now But thanks team you guys as always are the best.

Share this post


Link to post
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

Sign in to follow this  

×