SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking rollover buttons

    This is the first time I have ever attempted or even looked into javascript, so please make your answers VERY easy to understand I attempted some basic rollover buttons for a website I am working on: http://www.logogod.com/tom/buttontest.html However rollover them and you will see that only the final button works properly. Please could you point out what is wrong with my code and try and help me fix things. Thanks a lot

  2. #2
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no one?

  3. #3
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    A quick glance at your code suggests that at least one problem is that you are not initializing your cached images as image objects as in "new Image()". That said, it really looks like you are taking the long way 'round to do a simple rollover.

    Here's a page demonstrating a different approach that I did for a Lockergnome article: http://www.oregoncanoesport.com/Locker_01.html

    I should point out that this exact rollover technique doesn't work well with older browsers, but other simple ones do.

  4. #4
    SitePoint Wizard Young Twig's Avatar
    Join Date
    Dec 2003
    Location
    Albany, New York
    Posts
    1,355
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    HTML Code:
    <SCRIPT language="JavaScript">
    <!--
    
      if (document.images)
       {
         pic1on= hoverhome(73,31);
         pic1on.src="http://www.logogod.com/tom/bphoverhome.gif";  
         pic2on= hoverservices(101,31);
         pic2on.src="http://www.logogod.com/tom/bphoverservices.gif";  
         pic3on= hovercompany(108,31);
         pic3on.src="http://www.logogod.com/tom/bphovercompany.gif"; 
         pic4on= hovercontactus(119,31);
         pic4on.src="http://www.logogod.com/tom/bphovercontactus.gif";
    
         pic1off= buttonhome(73,31);
         pic1off.src="http://www.logogod.com/tom/bpbuttonhome.gif";
         pic2off= buttonservices(101,31);
         pic2off.src="http://www.logogod.com/tom/bpbuttonservices.gif";
         pic3off= buttoncompany(108,31);
         pic3off.src="http://www.logogod.com/tom/bpbuttoncompany.gif";
         pic4off= buttoncontactus(119,31);
         pic4off.src="http://www.logogod.com/tom/bpbuttoncontactus.gif";
       }
    
    function lightup(pic1)
     {
       if (document.images)
        {
          imgOn=eval(pic1 + "http://www.logogod.com/tom/bphoverhome.gif");
          document[pic1].src="http://www.logogod.com/tom/bphoverhome.gif";
        }
     }
    
    
    function lightup(pic2)
     {
       if (document.images)
        {
          imgOn=eval(pic2 + "http://www.logogod.com/tom/bphoverservices.gif");
          document[pic2].src="http://www.logogod.com/tom/bphoverservices.gif";
        }
     }
    
    
    function lightup(pic3)
     {
       if (document.images)
        {
          imgOn=eval(pic3 + "http://www.logogod.com/tom/bphovercompany.gif");
          document[pic3].src="http://www.logogod.com/tom/bphovercompany.gif";
        }
     }
    
    function lightup(pic4)
     {
       if (document.images)
        {
          imgOn=eval(pic4 + "http://www.logogod.com/tom/bphovercontactus.gif");
          document[pic4].src="http://www.logogod.com/tom/bphovercontactus.gif";
        }
     }
    
    
    function turnoff(pic1)
     {
       if (document.images)
        {
          imgOff=eval(pic1 + "http://www.logogod.com/tom/bpbuttonhome.gif");
          document[pic1].src="http://www.logogod.com/tom/bpbuttonhome.gif";
          
        }
     }
    
    
    function turnoff(pic2)
     {
       if (document.images)
        {
          
    imgOff=eval(pic2 + "http://www.logogod.com/tom/bpbuttonservices.gif");
          document[pic2].src="http://www.logogod.com/tom/bpbuttonservices.gif";
          
        }
     }
    
    
    function turnoff(pic3)
     {
       if (document.images)
        {
          
    imgOff=eval(pic3 + "http://www.logogod.com/tom/bpbuttoncompany.gif");
          document[pic3].src="http://www.logogod.com/tom/bpbuttoncompany.gif";
          
        }
     }
    
    
    function turnoff(pic4) {
       if (document.images)
        {
          
          imgOff=eval(pic4 + "http://www.logogod.com/tom/bpbuttoncontactus.gif");
          document[pic4].src="http://www.logogod.com/tom/bpbuttoncontactus.gif";
          
        }
     }
    
    //-->
    </SCRIPT>
    You're declaring the functions lightup and turnoff four times.

    But as JVLB said, this is the hard way to do rollovers.

    Check these articles out:
    http://www.alistapart.com/articles/sprites/
    http://builder.com.com/5100-6371-5148960.html

  5. #5
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way that I could just change my existing code without redoing it all... I would really appreciate it if someone told me the changes to make to my code, should I compress it and this alone would make it work???

  6. #6
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    anyone? sorry I do have somewhat of a deadline for this...

  7. #7
    SitePoint Addict
    Join Date
    May 2004
    Location
    Europe
    Posts
    216
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    1. Replace all lines like these pic1on= hoverhome(73,31); with pic1on= new Image(73,31);

    2. Delete 3 of the 4 lightup functions and change the remaining one to this:
    Code:
    function lightup(pic)
     {
       if (document.images)
        {
          document.images[pic].src=window[pic+"on"].src;
        }
     }
    3. Delete 3 of the 4 turnoff functions and change the remaining one to this:
    Code:
    function turnoff(pic)
     {
       if (document.images)
        {
              document.images[pic].src=window[pic+"off"].src;
        }
     }

  8. #8
    SitePoint Guru clink's Avatar
    Join Date
    Feb 2003
    Location
    UK
    Posts
    896
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thankyou so much I can't believe how much simpler that is than the horrible mile-long code that I churned out


Bookmarks

Posting Permissions

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