Jump to content

Rollover question about my code


Hooch
 Share

Recommended Posts

**FIXED**Shown on my 3rd postHello all. I have an image rollover working. But not 100% Here is my HTML

<table width="770" border="0" align="center"  cellpadding="0" cellspacing="0" background="" class="">  <tr align="center">	<td height="40" colspan="5" background="images/links_bg_1_40.jpg">	<a href="index.php" class="home"> </a><a href="about_us.php" class="about_us"> </a><a href="art.php" class="art"></a>	</td>  </tr></table>

Here is my CSS

/*  ==========  Buttons   ==========  */ .home {background-image:url(../images/button_home_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;width:103px;height:40px;}.home:hover {background-image:url(../images/button_home_over.jpg);}.about_us {background-image:url(../images/button_about_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;width:103px;height:40px;}.about_us:hover {background-image:url(../images/button_about_over.jpg);}.art {background-image:url(../images/button_art_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;width:103px;height:40px;}.art:hover {background-image:url(../images/button_art_over.jpg);}

I would like these buttons side by side, but for some reason they are lined up top to bottom. Is there a problem with my code? Thank you for any help. Hooch

Link to comment
Share on other sites

Thank you for your reply. This does make the buttons go inline, but you only see a small line. Not the button. We are getting there.**Fixed** Here is my CSS that works.

.home {background-image:url(../images/button_home_reg.jpg);background-repeat:no-repeat;text-decoration:none;display:block;float:left;margin: 0px 0 0px 24.5px; width:103px;height:40px;}.home:span {display:none;}.home:hover {background-image:url(../images/button_home_over.jpg);}

I had to leave the block but add the float left.The 0px's are for moving up/down, left/right.The lone 0 I am not sure what it does.The 24.5px is the offset, so the float left is actually centered.I tried float:center but it did not work. Thank you for all your help. Hooch

Link to comment
Share on other sites

The 0px's are for moving up/down, left/right.The lone 0 I am not sure what it does.The 24.5px is the offset, so the float left is actually centered
the px after a 0 size can be eliminated because 0px = 0em = 0pt = 0%, etc.the size descriptor is not required only when size is equal to zero, though. In all other cases, you must include the unit of measurement (px/em/%, etc.)
Link to comment
Share on other sites

  • 2 weeks later...

Hey all. I am opening this thread up again. I have a problem with my css rollover. The buttons are not loaded up for the "over" stage. So when you 1st mouse over the button there is nothing there. Once the mouse over has started, the image will load. Then all is fine. But that 1st mouseover looks terrible. Any options here? Thank you, Hooch

Link to comment
Share on other sites

preload the on:hover images into a 1px high by 1px wide spot on the page. typically someplace in the footer would be good. then they are ready and waiting for the on:hover reaction to be quicker due to not needing another call for the images. (i think)optionally, there are methods for using a single image for both states. the image gets 'slide' into a different position to show the second part of the image.

Link to comment
Share on other sites

That's how CSS works, it does exactly what you tell it to do. When the page loads, the main images that are on the links get loaded. Only after you have hovered over the links will it load your second image. Since it's two different images they both have to be loaded before they are displayed. So you don't initially see the images as you hover over it the first time since it's loading it.There is a solution to this. What you can do is load one long image for the links when the page is loaded (this long image has the regular image, and the image when the user hovers over it together as one) then when you hover it, all the CSS does is move over several pixels on the same image and display the hover image thus giving the effect that's it's two different images when it's really not.I know that was rather long winded, just check out this topic:http://w3schools.invisionzone.com/index.php?showtopic=15410

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...