www.webdeveloper.com
Results 1 to 15 of 15

Thread: [RESOLVED] Rollover Question

Hybrid View

  1. #1
    Join Date
    Jun 2009
    Posts
    15

    resolved [RESOLVED] Rollover Question

    Ok i have a rollover effect that's set to 35 pixels, but then when you click on it it has a 5px space underneath the image. I then made the image 30 pixels and it is now the right height but the image is stretched.

    My code is

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.images) {
        homebuttonup       = new Image();
        homebuttonup.src   = "http://webuycrap.webs.com/NavigationTop/PNG/Homeoff.png" ;
        homebuttondown     = new Image() ;
        homebuttondown.src = "http://webuycrap.webs.com/NavigationTop/PNG/Homeon.png" ;
    }
    function buttondown( buttonname )
    {
        if (document.images) {
          document[ buttonname ].src = eval( buttonname + "down.src" );
        }
    }
    function buttonup ( buttonname )
    {
        if (document.images) {
          document[ buttonname ].src = eval( buttonname + "up.src" );
        }
    }
    // -->
    </script>
    and html is

    Code:
    <!--Nav Bar-->
    <table width=1000 cellpadding=0 cellspacing=0 class="bgrepeat" background="http://webuycrap.webs.com/NavigationTop/Navbg.png">
    <tr height=35><td>
    
    <center><table cellpadding=0 cellspacing=0><tr>
    
    <td><a href="index.html"
      onmouseover="buttondown('homebutton')"
      onmouseout="buttonup('homebutton')">
    <img src="http://webuycrap.webs.com/NavigationTop/PNG/Homeoff.png" name="homebutton" border="0" height=35 />
    </a>
    </td>
    
    </tr>
    </table></center>
    </td></tr>
    </table>
    Here is a picture of the problem
    http://webuycrap.webs.com/Problem.bmp

  2. #2
    Join Date
    Aug 2009
    Posts
    593
    Are you using a STRICT doctype and running this code in FireFox by any chance?

  3. #3
    Join Date
    Jun 2009
    Posts
    15
    What do you mean STRICT, sorry i dont do java that much, and ya im using firefox

  4. #4
    Join Date
    Jun 2009
    Location
    Washington (State)
    Posts
    58
    Wow, I haven't seen a <center> tag in a long time.....

    use css instead. Example:
    Code:
    <td id="home">
    then your css could be as simple as:
    Code:
    #home  {background: url('buttonup.png')}
    #home hover   {background: url('buttondown.png')}
    This still doesn't solve the 30 vs 35 pixel problem, but I did not see enough code there to guess as to the nature of the problem. There may be a problem with the original images being different heights, you can stop the stretching by inserting the correct width. If you eliminate tables and used css, then it's not an issue.

    Better yet, don't use pictures for the word "Home" use text, and change it's style when hovering. This way the navbar will flow around your customer's browser settings.

    --Dave

  5. #5
    Join Date
    Aug 2009
    Posts
    593
    You right EasyTech, <center> tags are depricated. If you want to center the <table> on the page you should be using the margin style:

    HTML Code:
    <table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">
    Little bit of useless information there

  6. #6
    Join Date
    Jun 2009
    Posts
    15
    Quote Originally Posted by thraddash View Post
    You right EasyTech, <center> tags are depricated. If you want to center the <table> on the page you should be using the margin style:

    HTML Code:
    <table style="margin: 0px auto;" border="0" cellspacing="0" cellpadding="0">
    Little bit of useless information there
    I started to use that on my older version of this site, but i kinda driffed away from that. Ill go threw and set a style up for Centering and just use a class and refrence sheet. Thanks

  7. #7
    Join Date
    Jun 2009
    Posts
    15
    Quote Originally Posted by EasyTech View Post
    Wow, I haven't seen a <center> tag in a long time.....

    use css instead. Example:
    Code:
    <td id="home">
    then your css could be as simple as:
    Code:
    #home  {background: url('buttonup.png')}
    #home hover   {background: url('buttondown.png')}
    This still doesn't solve the 30 vs 35 pixel problem, but I did not see enough code there to guess as to the nature of the problem. There may be a problem with the original images being different heights, you can stop the stretching by inserting the correct width. If you eliminate tables and used css, then it's not an issue.

    Better yet, don't use pictures for the word "Home" use text, and change it's style when hovering. This way the navbar will flow around your customer's browser settings.

    --Dave
    I tryed to do the whole Id="navbar" thing and set it up with css but it was kinda complicated i thought, I only tryed it once 1 night and i guess if nothing here works i could try that again. And for the Home i have a special text and a border around that text, is there anyway to atleast put a border around it the word? (not a box but around every letter)

    Thanks for all the replies

    ---------------------------------
    Ok i just tried your

    </style>
    #home {background: url('aboutoff.png')}
    #home hover {background: url('abouton.png')}
    </style>

    <body>
    <table><td id=home ></td></table>
    </body>

    and it didnt work. Nothing shows up. If i did the using text instead of pictures, how would i make it so when you hover over it it changes a 94 by 35 pixel Dimgray box behind it?
    Last edited by hubbajubba; 08-10-2009 at 06:29 PM. Reason: Tryed the example

  8. #8
    Join Date
    Aug 2009
    Posts
    593
    As far as I am aware, Firefox adds extra padding to the bottom of all images if you use the strict doctype.

    Try the transitional doctype and see if it solves your problem:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    (This should be the first line of code in your source file)

  9. #9
    Join Date
    Jun 2009
    Posts
    15
    Quote Originally Posted by thraddash View Post
    As far as I am aware, Firefox adds extra padding to the bottom of all images if you use the strict doctype.

    Try the transitional doctype and see if it solves your problem:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    (This should be the first line of code in your source file)
    It still put the extra 5px padding at the bottom, but thanks

  10. #10
    Join Date
    Aug 2009
    Posts
    593
    Negative padding does not work, just give use a better view of what we are dealing with here, or a link to an example page online if possible.

  11. #11
    Join Date
    Jun 2009
    Location
    Washington (State)
    Posts
    58
    A few ideas:

    * Put img {border:0; margin:0; padding:0} in your style sheet to eliminate any potential border issues.

    *You need to quote any name or id's . <td id="home"></td> There can only be one id'd tag on your page as well. There may be multiple names.

    * Make sure that both pictures have the same height and width.

    * Set both the height and width of the picture. If you don't do this, then the image will be scaled to fit. You can force a 30 by 40 picture into a 20 by 38 frame by putting 'width="20 Height="38"' into your <img> tag, and the image will be horribly distorted, but it will fit.

    *For shadows, it's css3 and may not work in all browsers. http://www.w3.org/Style/Examples/007...shadow#outline

    --Dave

  12. #12
    Join Date
    Jun 2009
    Posts
    15
    Quote Originally Posted by thraddash View Post
    Negative padding does not work, just give use a better view of what we are dealing with here, or a link to an example page online if possible.
    Its not a very good example because this is just the code i copyied onto a new page, ive made fixes to some of it on the other page.

    http://webuycrap.webs.com/NewLook.htm

  13. #13
    Join Date
    Jun 2009
    Posts
    15
    I just took and made it so only one of my images is linked

    Code:
    <a href="http://webuycrap.webs.com/about.htm"><IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/PoliciesOff.png" border=0></a>
    and that worked fine

    then when i put

    Code:
    <a href="http://webuycrap.webs.com/policies.htm"><IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/PoliciesOff.png" border=0></a>
    <a href="http://webuycrap.webs.com/about.htm"><IMG src="http://www.freewebs.com/webuycrap/NavigationTop/PNG/aboutOff.png" border=0></a>
    it made the space? I tryed this with multiple images and they all did the same thing
    Last edited by hubbajubba; 08-10-2009 at 07:24 PM. Reason: Found new problem

  14. #14
    Join Date
    Aug 2009
    Posts
    593
    Took me a while but whew!!

    Your problem is because your <td> content is on multiple lines.
    Try removing all line breaks and spaces between your <td> tags eg:

    HTML Code:
    <td><a href="http://webuycrap.webs.com/index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')"><img src="NewLook_files/Homeoff.png" name="homebutton" border="0" height="35" /></a></td>
    Last edited by thraddash; 08-10-2009 at 07:49 PM.

  15. #15
    Join Date
    Jun 2009
    Posts
    15
    Quote Originally Posted by thraddash View Post
    Took me a while but whew!!

    Your problem is because your <td> content is on multiple lines.
    Try removing all line breaks and spaces between your <td> tags eg:

    HTML Code:
    <td><a href="http://webuycrap.webs.com/index.html" onmouseover="buttondown('homebutton')" onmouseout="buttonup('homebutton')"><img src="NewLook_files/Homeoff.png" name="homebutton" border="0" height="35" /></a></td>
    Dude thanks, finally one that works . Is there any logic to why they have to be on same line?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles