Button Problem

Discussion in 'Web Design & Coding' started by Dave601, Nov 22, 2005.

  1. Dave601

    Dave601 Web Guru VIP Member

    Joined:
    Jan 27, 2004
    Messages:
    1,017
    Likes Received:
    22
    Location:
    St. Paul, MN
    So, here it is guys. I have buttons that will be linking to other parts of my site (About, Blog, Links, ect.). What I want is so when someone moves their mouse over the button it will show a different image. Here are the two images:

    [​IMG]
    [​IMG]

    So I would want the top image displayed and when someone mouses over the button the second image would be displayed. I have tried some things with JavaScript, but I haven't been able to figure anything out for all of the different buttons (only one at a time would work).

    Does someone know a way of doing this with or without JavaScript?
     
    Dave601, Nov 22, 2005
    #1
    1. Advertisements

  2. Dave601

    Nickweb Resident Filmaker Moderator

    Joined:
    Nov 7, 2003
    Messages:
    2,532
    Likes Received:
    27
    Location:
    North Wales, Britain
    add this to the <head> section of the webpage:
    HTML:
    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.images) {
    homebuttonup = new Image();
    homebuttonup.src = "homebutton.gif" ;
    homebuttondown = new Image() ;
    homebuttondown.src = "homebuttondown.gif" ;
     
    aboutbuttonup = new Image();
    aboutbuttonup.src = "aboutbutton.gif" ;
    aboutbuttondown = new Image() ;
    aboutbuttondown.src = "aboutbuttondown.gif" ;
    }
    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 this in the <BODY> tag"

    HTML:
    <a href="index.html"
    onmouseover="buttondown('homebutton')"
    onmouseout="buttonup('homebutton')">
    <img src="homebutton.gif" name="homebutton" border="0" />
    </a>
     
    <a href="index.html"
    onmouseover="buttondown('aboutbutton')"
    onmouseout="buttonup('homebutton')">
    <img src="homebutton.gif" name="aboutbutton" border="0" />
    </a>
    now the important thing:

    to add a new rollover button, add another
    HTML:
    homebuttonup = new Image();
    homebuttonup.src = "homebutton.gif" ;
    homebuttondown = new Image() ;
    homebuttondown.src = "homebuttondown.gif" ;
     
    in the head tag, that corresponds to the image you want, and add another
    <a href="about.html"
    onmouseover="buttondown('aboutbutton')"
    onmouseout="buttonup('homebutton')">
    <img src="homebutton.gif" name="aboutbutton" border="0" />
    </a>
    to the body tag.


    hope that helps
     
    Nickweb, Nov 22, 2005
    #2
    Dave601 likes this.
    1. Advertisements

  3. Dave601

    Dave601 Web Guru VIP Member

    Joined:
    Jan 27, 2004
    Messages:
    1,017
    Likes Received:
    22
    Location:
    St. Paul, MN
    That helped a lot. Thanks Nick!
     
    Dave601, Nov 28, 2005
    #3
  4. Dave601

    Nickweb Resident Filmaker Moderator

    Joined:
    Nov 7, 2003
    Messages:
    2,532
    Likes Received:
    27
    Location:
    North Wales, Britain
    no probs, that's what were all here for
     
    Nickweb, Nov 30, 2005
    #4
  5. Dave601

    James Photojournalist

    Joined:
    Dec 24, 2002
    Messages:
    6,662
    Likes Received:
    35
    Nice, Nick. Another way is to check out the code here at THQ for the logo in the header. I've found that it works well in all browser.
     
    James, Nov 30, 2005
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.