SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast sophia_'s Avatar
    Join Date
    Sep 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    roll over and reset buttons

    hello

    i can change the button image using javascript but, i cant figure out
    how to *re-set* the button to its original state when a different button
    is pressed

    i.e

    button A = imageA.gif - when pressed the image changes to imageA2.gif

    button B = imageB.gif - when pressed the image changes to imageB2.gif and
    *re-sets* button A, back to imageA.gif from imageA2.gif

    does that make sense?

    any help please? script below...


    thanks sophia


    <code>
    <head>
    <script language="JavaScript">
    <!--
    if (document.images) {
    button1_down=new Image(); button1_down.src="imageA.gif";
    button1_up =new Image(); button1_up.src ="imageA2.gif";

    button2_down=new Image(); button2_down.src="imageB.gif";
    button2_up =new Image(); button2_up.src ="imageB2.gif";
    }

    function pressButton(btName) {
    if (document.images)
    eval('document.'+btName+'.src='+btName+'_down.src');
    }

    function releaseButton(btName) {
    if (document.images)
    eval('document.'+btName+'.src='+btName+'_up.src');
    }
    //-->
    </script>
    </head>
    </code>

    <code>
    <body>
    <a href="pages/page1.html" target="content"
    onMouseDown="pressButton('button1');return true;"
    onMouseUp="releaseButton('button1');return true;"
    onMouseOut="releaseButton('button1');return true;"
    onClick="return true;">
    <img name="button1" border="0" alt="page1" src="imageA.gif"></a>

    <a href="pages/page2.html" target="content"
    onMouseDown="pressButton('button2');return true;"
    onMouseUp="releaseButton('button2');return true;"
    onMouseOut="releaseButton('button2');return true;"
    onClick="return true;">
    <img name="button2" border="0" alt="page2" src="imageB.gif"></a>
    </body>
    </code>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sophia_ View Post
    button B = imageB.gif - when pressed the image changes to imageB2.gif and
    *re-sets* button A, back to imageA.gif from imageA2.gif
    Just add the function you want to run to the mousedown event.

    Code HTML4Strict:
    <a href="pages/page2.html" target="content"
       onMouseDown="pressButton('button2'); releaseButton('button1'); return true;"
       onMouseUp="releaseButton('button2');return true;" 
       onMouseOut="releaseButton('button2');return true;"
       onClick="return true;">

  3. #3
    SitePoint Enthusiast sophia_'s Avatar
    Join Date
    Sep 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi pmw57

    thanks for that, i will give it a try and post my results


    sophia

  4. #4
    SitePoint Enthusiast sophia_'s Avatar
    Join Date
    Sep 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    YAY!!!! that works great ... thats for that mpw57

    ok, so if i want to add another button?

    i thought that it wopuld maybe something like

    releaseButton ('button1','button2','button3')

    but alas, it isnt >.<


    here is what i have for the two buttons....

    <code>
    <head>
    <script language="JavaScript">
    <!--
    if (document.images) {
    button1_down=new Image(); button1_down.src="imageA.gif";
    button1_up =new Image(); button1_up.src ="imageA2.gif";

    button2_down=new Image(); button2_down.src="imageB.gif";
    button2_up =new Image(); button2_up.src ="imageB2.gif";
    }

    function pressButton(btName) {
    if (document.images)
    eval('document.'+btName+'.src='+btName+'_down.src');
    }

    function releaseButton(btName) {
    if (document.images)
    eval('document.'+btName+'.src='+btName+'_up.src');
    }
    //-->
    </script>
    </head>
    </code>

    <code>
    <body>
    <a href="pages/page1.html" target="content"
    onMouseDown="pressButton('button1'); releaseButton('button2'); return true;"
    onMouseUp="releaseButton('button2');return true;"
    onMouseOut="releaseButton('button2');return true;"
    onClick="return true;">
    <img name="button1" border="0" alt="page1" src="imageA.gif"></a>

    <a href="pages/page2.html" target="content"
    onMouseDown="pressButton('button2'); releaseButton('button1'); return true;"
    onMouseUp="releaseButton('button1');return true;"
    onMouseOut="releaseButton('button1');return true;"
    onClick="return true;">
    <img name="button2" border="0" alt="page2" src="imageB.gif"></a>

    </body>
    </code>

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sophia_ View Post
    YAY!!!! that works great ... thats for that mpw57

    ok, so if i want to add another button?

    i thought that it wopuld maybe something like

    releaseButton ('button1','button2','button3')

    but alas, it isnt >.<
    The code isn't written to do that, but it's an easy improvement that can be made.
    I would have coded the script for this in a completely different way myself, but I won't confuse things with how I would have coded it. Instead I'll use a technique or two to improve on how it currently is.

    This is how the images for one of the buttons is created.

    Code HTML4Strict:
    <img name="button1" border="0" alt="page1" src="imageA.gif"></a>

    Two scripting variables are created to hold the names of the button_up and button_down images.

    Code JavaScript:
    button1_down=new Image(); button1_down.src="imageA.gif";
    button1_up =new Image(); button1_up.src ="imageA2.gif";

    Your code has two buttons already, so if you want a third button you can make a copy of one of those existing buttons.
    On the copy you should change the number to one that's not already being used, say, a 3, and change the image name to the appropriate images you have for them. In keeping with the existing code I'll call them imageC.gif and imageC2.gif.

    Code JavaScript:
    button3_down=new Image(); button3_down.src="imageC.gif";
    button3_up =new Image(); button3_up.src ="imageC2.gif";

    The pressButton() releaseButton functions can be modified slightly so that you can pass multiple arguments to them.
    That eval is evil, but I won't change it at this stage.

    Code JavaScript:
    function pressButton() {
      forEachArgument(arguments, function(btName) {
        if (document.images) {
          eval('document.'+btName+'.src='+btName+'_down.src');
        }
      });
    }
     
    function releaseButton() {
      forEachArgument(arguments, function(btName) {
        if (document.images) {
          eval('document.'+btName+'.src='+btName+'_up.src');
        }
      });
    }
     
    function forEachArgument(args, fn) {
      for (var i = 0; i < args.length; i++) {
        fn(args[i]);
      }
    }

    Now you can make calls like releaseButton('button1', 'button2') and each of the arguments will be properly handled. You could even make a call like releaseButton('button1', 'button2', 'button3', 'myspecialbutton', 'foo', 'bar', 'baz')

    Finally you want to show the button on the page, so the code for the third button might look like this:

    Code HTML4Strict:
    <a href="pages/page3.html" target="content"
    onMouseDown="pressButton('button3'); releaseButton('button1', 'button2'); return true;"
    onMouseUp="releaseButton('button3');return true;"
    onMouseOut="releaseButton('button3');return true;"
    onClick="return true;">
    <img name="button3" border="0" alt="page3" src="imageC.gif"></a>
    Last edited by paul_wilkins; Dec 17, 2007 at 12:23.

  6. #6
    SitePoint Enthusiast sophia_'s Avatar
    Join Date
    Sep 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow!!!! thats so much for your time pmw57

    i will try your examples and post back my results


    thanks again


    sophia

  7. #7
    SitePoint Enthusiast sophia_'s Avatar
    Join Date
    Sep 2007
    Posts
    30
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey, thanks again for your input pmw57


    you have really helped me to understand how
    this code works


    ok so that didnt work as i thought it would so i
    will play around with the code and see if i can
    work it out


    i will post my results later


    thanks again, sophia


    here is the code that i have so far


    <code>

    <html>
    <head>
    <title>TEST MULTI</title>
    <script language="JavaScript">
    <!--
    if (document.images) {
    button1_down=new Image(); button1_down.src="imageA2.gif";
    button1_up =new Image(); button1_up.src ="imageA.gif";

    button2_down=new Image(); button2_down.src="imageB2.gif";
    button2_up =new Image(); button2_up.src ="imageB.gif";

    button3_down=new Image(); button3_down.src="imageC2.gif";
    button3_up =new Image(); button3_up.src ="imageC.gif";
    }
    function pressButton() {
    forEachArgument(arguments, function(btName) {
    if (document.images) {
    eval('document.'+btName+'.src='+btName+'_down.src');
    }
    });
    }

    function releaseButton() {
    forEachArgument(arguments, function(btName) {
    if (document.images) {
    eval('document.'+btName+'.src='+btName+'_up.src');
    }
    });
    }

    function forEachArgument(args, fn) {
    for (var i = 0; i < args.length; i++) {
    fn(args[i]);
    }
    }
    //--> target="content"
    </script>
    </head>

    <body>
    <a href="#" target="#"
    onMouseDown="pressButton('button1'); releaseButton('button2', 'button3'); return true;"
    onMouseUp="releaseButton('button1');return true;"
    onMouseOut="releaseButton('button1');return true;"
    onClick="return true;"
    ><img name="button1" border="0"
    alt="button"
    src="imageA2.gif"
    ></a>

    <a href="#" target="#"
    onMouseDown="pressButton('button2'); releaseButton('button1', 'button3'); return true;"
    onMouseUp="releaseButton('button2');return true;"
    onMouseOut="releaseButton('button2');return true;"
    onClick="return true;"
    ><img name="button2" border="0"
    alt="button"
    src="imageB2.gif"
    ></a>

    <a href="#" target="#"
    onMouseDown="pressButton('button3'); releaseButton('button1', 'button2'); return true;"
    onMouseUp="releaseButton('button3');return true;"
    onMouseOut="releaseButton('button3');return true;"
    onClick="return true;">
    <img name="button3" border="0"
    alt="button"
    src="imageC2.gif"></a>

    </body>
    </html>
    </code>

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by sophia_ View Post
    ok so that didnt work as i thought it would
    If you can describe what you thought would happen then we can make that happen for you.


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
  •