"sticky" buttons?

Discussion in 'Javascript' started by Rich Grise, May 28, 2008.

  1. Rich Grise

    Rich Grise Guest

    I'm putting together a website with buttons in one frame and the target in
    another.

    I found this on the web somewhere and copied it, now I can't find the page
    I copied it from:
    http://mysite.verizon.net/richgrise/magicbuttons/demo_stickyframes.html

    But I don't want it to come up "nothing selected", so I started doing
    a little hacking, and came up with this:
    http://mysite.verizon.net/richgrise/magicbuttons.mod1/demo_stickyframes.html

    Which starts on the right page, but I want button 1 to come up in the
    "pressed" state, and I don't know how to do that.

    Here's the frameset page:
    ---<quote>---
    <HTML>
    <HEAD>
    <TITLE>Magic Buttons! - Demo 3</TITLE>
    </HEAD>

    <FRAMESET ROWS="*,46" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>
    <!-- <FRAME SRC="target_nothing.html" NAME="topframe" SPACING=0 FRAMEBORDER=0 FRAMESPACING=0> replaced by below: -->
    <FRAME SRC="target1.html" NAME="topframe" SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>
    <FRAME SRC="bottom.html" NAME="bottomframe" MARGINHEIGHT=4 SCROLLING="NO" SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>
    </FRAMESET>

    </HTML>
    ---</quote>---

    You can see where I changed the "start" page, and here's the bottom frame
    with the buttons, and the one change I've made so far, which is to change
    homeURL, but I don't know how to make it come up with button "1" pressed.

    Does anyone have a script that would do that? I'm a programmer, but new
    to JS and it's terribly confusing. Also, as a programmer, I'm wondering,
    is this code well-written? Because I find it almost incomprehensible.

    ---<quote>---
    <HTML>
    <HEAD>
    <TITLE>Magic Buttons! - Mouseover effects tutorial</TITLE>

    <SCRIPT LANGUAGE="JavaScript"><!--
    /*********************************************************
    M A G I C B U T T O N S v3.1
    http://www.htmliseasy.com/buttons/
    Permission is granted to freely use this script.
    **********************************************************/

    // preload images:
    if (document.images) {
    button1___up = new Image(36,32); button1___up.src = "button1___up.gif";
    button1_init = new Image(36,32); button1_init.src = "button1_init.gif";
    button1_down = new Image(36,32); button1_down.src = "button1_down.gif";

    button2___up = new Image(36,32); button2___up.src = "button2___up.gif";
    button2_init = new Image(36,32); button2_init.src = "button2_init.gif";
    button2_down = new Image(36,32); button2_down.src = "button2_down.gif";

    button3___up = new Image(36,32); button3___up.src = "button3___up.gif";
    button3_init = new Image(36,32); button3_init.src = "button3_init.gif";
    button3_down = new Image(36,32); button3_down.src = "button3_down.gif";

    button4___up = new Image(36,32); button4___up.src = "button4___up.gif";
    button4_init = new Image(36,32); button4_init.src = "button4_init.gif";
    button4_down = new Image(36,32); button4_down.src = "button4_down.gif";
    }

    var cherry = 1;
    var currentlyDepressed = "zz";
    var imgName_old = "zz";
    // var homeUrl = "target_nothing.html"; replaced by below:
    var homeUrl = "target1.html";

    /* The regular image swapping function. It does the mouseover
    and the mouse out only. currentlyDepressed is the variable that
    keeps the function from trying to change the depressed button.
    =============================================================*/
    function hiLite(imgName,imgObjName) {
    if (document.images) {
    if (imgName != currentlyDepressed) {
    document.images[imgName].src = eval(imgObjName + ".src");
    }
    }
    }


    /* The onClick/onMouseDown function. When a button is clicked
    it not only depresses the button but remembers which one is
    depressed. When another button is depressed the previous button
    is popped up. Ain't it cool!
    =============================================================*/
    function hiLite2(imgName,imgObjName,resetImg,targetUrl) {
    if (document.images) {

    /* If you click on the currently depressed button
    -----------------------------------------------------------*/
    if (imgName == imgName_old) {
    if (cherry == 0){
    // pops the button back up
    document.images[imgName_old].src = eval(imgObjName_old + ".src");
    parent.topframe.location.href = homeUrl;
    imgName_old = "zz";
    imgObjName_old = resetImg;
    currentlyDepressed = "zz";
    cherry = 1;
    }
    } else {

    /* If you click on a non-depressed button
    -----------------------------------------------------------*/
    if (cherry == 0){
    // pops old button back up
    document.images[imgName_old].src = eval(imgObjName_old + ".src");
    }
    // depresses new button
    document.images[imgName].src = eval(imgObjName + ".src");
    parent.topframe.location.href = targetUrl;
    imgName_old = imgName;
    imgObjName_old = resetImg;
    currentlyDepressed = imgName;
    cherry = 0;
    }
    }
    }

    function nada() {
    // What says fee-fi-fo fee-fi-fo-fo ??
    }

    //--></SCRIPT>

    </HEAD>
    <BODY BGCOLOR="#FFFFFF">

    <CENTER>
    <A HREF="javascript:nada()"
    onMouseOver="hiLite('img01','button1___up'); top.status = 'Target 1'; return true"
    onMouseOut="hiLite('img01','button1_init'); top.status = ''; return true"
    onClick="hiLite2('img01','button1_down','button1_init','target1.html'); return false"><IMG
    NAME="img01" SRC="button1_init.gif" width=36 height=32 border=0></A>

    <A HREF="javascript:nada()"
    onMouseOver="hiLite('img02','button2___up'); top.status = 'Target 2'; return true"
    onMouseOut="hiLite('img02','button2_init'); top.status = ''; return true"
    onClick="hiLite2('img02','button2_down','button2_init','target2.html'); return false"><IMG
    NAME="img02" SRC="button2_init.gif" width=36 height=32 border=0></A>

    <A HREF="javascript:nada()"
    onMouseOver="hiLite('img03','button3___up'); top.status = 'Target 3'; return true"
    onMouseOut="hiLite('img03','button3_init'); top.status = ''; return true"
    onClick="hiLite2('img03','button3_down','button3_init','target3.html'); return false"><IMG
    NAME="img03" SRC="button3_init.gif" width=36 height=32 border=0></A>

    <A HREF="javascript:nada()"
    onMouseOver="hiLite('img04','button4___up'); top.status = 'Target 4'; return true"
    onMouseOut="hiLite('img04','button4_init'); top.status = ''; return true"
    onClick="hiLite2('img04','button4_down','button4_init','target4.html'); return false"><IMG
    NAME="img04" SRC="button4_init.gif" width=36 height=32 border=0></A>


    <NOSCRIPT>
    <A HREF="target1.html" TARGET="topframe">[1]</A>
    <A HREF="target2.html" TARGET="topframe">[2]</A>
    <A HREF="target3.html" TARGET="topframe">[3]</A>
    <A HREF="target4.html" TARGET="topframe">[4]</A>
    <A HREF="target_nothing.html" TARGET="topframe">[none]</A>
    <SMALL>(Text links provided for non-js browsers)</SMALL>
    </NOSCRIPT>

    </CENTER>
    </BODY>
    </HTML>
    ---</quote>---

    Thanks,
    Rich
     
    Rich Grise, May 28, 2008
    #1
    1. Advertising

  2. Rich Grise

    Tom Cole Guest

    On May 28, 12:09 pm, Rich Grise <> wrote:
    > I'm putting together a website with buttons in one frame and the target in
    > another.
    >
    > I found this on the web somewhere and copied it, now I can't find the page
    > I copied it from:http://mysite.verizon.net/richgrise/magicbuttons/demo_stickyframes.html
    >
    > But I don't want it to come up "nothing selected", so I started doing
    > a little hacking, and came up with this:http://mysite.verizon.net/richgrise/magicbuttons.mod1/demo_stickyfram...
    >
    > Which starts on the right page, but I want button 1 to come up in the
    > "pressed" state, and I don't know how to do that.
    >
    > Here's the frameset page:
    > ---<quote>---
    > <HTML>
    > <HEAD>
    > <TITLE>Magic Buttons! - Demo 3</TITLE>
    > </HEAD>
    >
    > <FRAMESET ROWS="*,46" BORDER=0 SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>
    >  <!--  <FRAME SRC="target_nothing.html" NAME="topframe" SPACING=0 FRAMEBORDER=0 FRAMESPACING=0> replaced by below: -->
    >   <FRAME SRC="target1.html" NAME="topframe" SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>
    >   <FRAME SRC="bottom.html" NAME="bottomframe" MARGINHEIGHT=4 SCROLLING="NO" SPACING=0 FRAMEBORDER=0 FRAMESPACING=0>
    > </FRAMESET>
    >
    > </HTML>
    > ---</quote>---
    >
    > You can see where I changed the "start" page, and here's the bottom frame
    > with the buttons, and the one change I've made so far, which is to change
    > homeURL, but I don't know how to make it come up with button "1" pressed.
    >
    > Does anyone have a script that would do that? I'm a programmer, but new
    > to JS and it's terribly confusing. Also, as a programmer, I'm wondering,
    > is this code well-written? Because I find it almost incomprehensible.
    >
    > ---<quote>---
    > <HTML>
    > <HEAD>
    > <TITLE>Magic Buttons! - Mouseover effects tutorial</TITLE>
    >
    > <SCRIPT LANGUAGE="JavaScript"><!--
    > /*********************************************************
    >               M A G I C  B U T T O N S  v3.1
    >            http://www.htmliseasy.com/buttons/
    >       Permission is granted to freely use this script.
    > **********************************************************/
    >
    > // preload images:
    > if (document.images) {
    > button1___up = new Image(36,32); button1___up.src = "button1___up.gif";
    > button1_init = new Image(36,32); button1_init.src = "button1_init.gif";
    > button1_down = new Image(36,32); button1_down.src = "button1_down.gif";
    >
    > button2___up = new Image(36,32); button2___up.src = "button2___up.gif";
    > button2_init = new Image(36,32); button2_init.src = "button2_init.gif";
    > button2_down = new Image(36,32); button2_down.src = "button2_down.gif";
    >
    > button3___up = new Image(36,32); button3___up.src = "button3___up.gif";
    > button3_init = new Image(36,32); button3_init.src = "button3_init.gif";
    > button3_down = new Image(36,32); button3_down.src = "button3_down.gif";
    >
    > button4___up = new Image(36,32); button4___up.src = "button4___up.gif";
    > button4_init = new Image(36,32); button4_init.src = "button4_init.gif";
    > button4_down = new Image(36,32); button4_down.src = "button4_down.gif";      
    >
    > }
    >
    > var cherry = 1;
    > var currentlyDepressed = "zz";
    > var imgName_old = "zz";
    > // var homeUrl = "target_nothing.html"; replaced by below:
    > var homeUrl = "target1.html";
    >
    > /* The regular image swapping function. It does the mouseover
    > and the mouse out only. currentlyDepressed is the variable that
    > keeps the function from trying to change the depressed button.
    > =============================================================*/
    > function hiLite(imgName,imgObjName) {
    >   if (document.images) {
    >     if (imgName != currentlyDepressed) {
    >       document.images[imgName].src = eval(imgObjName + ".src");
    >     }
    >   }
    >
    > }
    >
    > /* The onClick/onMouseDown function. When a button is clicked
    > it not only depresses the button but remembers which one is
    > depressed. When another button is depressed the previous button
    > is popped up. Ain't it cool!
    > =============================================================*/
    > function hiLite2(imgName,imgObjName,resetImg,targetUrl) {
    >   if (document.images) {
    >
    >     /* If you click on the currently depressed button
    >     -----------------------------------------------------------*/
    >     if (imgName == imgName_old) {
    >       if (cherry == 0){
    >         // pops the button back up
    >         document.images[imgName_old].src = eval(imgObjName_old +".src");
    >         parent.topframe.location.href = homeUrl;
    >         imgName_old = "zz";
    >         imgObjName_old = resetImg;
    >         currentlyDepressed = "zz";
    >         cherry = 1;
    >       }
    >     } else {
    >
    >     /* If you click on a non-depressed button
    >     -----------------------------------------------------------*/
    >       if (cherry == 0){
    >         // pops old button back up
    >         document.images[imgName_old].src = eval(imgObjName_old +".src");
    >       }
    >         // depresses new button
    >         document.images[imgName].src = eval(imgObjName + ".src");
    >         parent.topframe.location.href = targetUrl;
    >         imgName_old = imgName;
    >         imgObjName_old = resetImg;
    >         currentlyDepressed = imgName;
    >         cherry = 0;
    >     }
    >   }
    >
    > }
    >
    > function nada() {
    > // What says fee-fi-fo fee-fi-fo-fo ??
    >
    > }
    >
    > //--></SCRIPT>
    >
    > </HEAD>
    > <BODY BGCOLOR="#FFFFFF">
    >
    > <CENTER>
    > <A HREF="javascript:nada()"
    >    onMouseOver="hiLite('img01','button1___up'); top.status = 'Target 1'; return true"
    >    onMouseOut="hiLite('img01','button1_init'); top.status = ''; return true"
    >    onClick="hiLite2('img01','button1_down','button1_init','target1.html'); return false"><IMG
    >       NAME="img01" SRC="button1_init.gif" width=36 height=32border=0></A>
    >
    > <A HREF="javascript:nada()"
    >    onMouseOver="hiLite('img02','button2___up'); top.status = 'Target 2'; return true"
    >    onMouseOut="hiLite('img02','button2_init'); top.status = ''; return true"
    >    onClick="hiLite2('img02','button2_down','button2_init','target2.html'); return false"><IMG
    >       NAME="img02" SRC="button2_init.gif" width=36 height=32border=0></A>
    >
    > <A HREF="javascript:nada()"
    >    onMouseOver="hiLite('img03','button3___up'); top.status = 'Target 3'; return true"
    >    onMouseOut="hiLite('img03','button3_init'); top.status = ''; return true"
    >    onClick="hiLite2('img03','button3_down','button3_init','target3.html'); return false"><IMG
    >       NAME="img03" SRC="button3_init.gif" width=36 height=32border=0></A>
    >
    > <A HREF="javascript:nada()"
    >    onMouseOver="hiLite('img04','button4___up'); top.status = 'Target 4'; return true"
    >    onMouseOut="hiLite('img04','button4_init'); top.status = ''; return true"
    >    onClick="hiLite2('img04','button4_down','button4_init','target4.html'); return false"><IMG
    >       NAME="img04" SRC="button4_init.gif" width=36 height=32border=0></A>
    >
    > <NOSCRIPT>
    > <A HREF="target1.html" TARGET="topframe">[1]</A>
    > <A HREF="target2.html" TARGET="topframe">[2]</A>
    > <A HREF="target3.html" TARGET="topframe">[3]</A>
    > <A HREF="target4.html" TARGET="topframe">[4]</A>
    > <A HREF="target_nothing.html" TARGET="topframe">[none]</A>
    > <SMALL>(Text links provided for non-js browsers)</SMALL>
    > </NOSCRIPT>
    >
    > </CENTER>
    > </BODY>
    > </HTML>
    > ---</quote>---
    >
    > Thanks,
    > Rich


    No need for anything fancy...why not just change this:

    <A HREF="javascript:nada()"
    onMouseOver="hiLite('img01','button1___up'); top.status = 'Target
    1'; return true"
    onMouseOut="hiLite('img01','button1_init'); top.status = ''; return
    true"

    onClick="hiLite2('img01','button1_down','button1_init','target1.html');
    return false"><IMG
    NAME="img01" SRC="button1_init.gif" width=36 height=32
    border=0></A>

    with this:

    <A HREF="javascript:nada()"
    onMouseOver="hiLite('img01','button1___up'); top.status = 'Target
    1'; return true"
    onMouseOut="hiLite('img01','button1_init'); top.status = ''; return
    true"

    onClick="hiLite2('img01','button1_down','button1_init','target1.html');
    return false"><IMG
    NAME="img01" SRC="button1_down.gif" width=36 height=32
    border=0></A>

    Since the page originally loads with page 1 already loaded, just go
    ahead and set the image to button1_down.gif right from the start.
     
    Tom Cole, May 29, 2008
    #2
    1. Advertising

  3. Rich Grise

    Rich Grise Guest

    On Thu, 29 May 2008 08:29:03 -0700, Tom Cole wrote:

    > On May 28, 12:09 pm, Rich Grise <> wrote:

    ["sticky" buttons]

    > No need for anything fancy...why not just change this:
    >

    Thanks! I'll be doing that today! :)

    Cheers!
    Rich
     
    Rich Grise, May 29, 2008
    #3
  4. Rich Grise

    Rich Grise Guest

    On Thu, 29 May 2008 08:29:03 -0700, Tom Cole wrote:

    > On May 28, 12:09 pm, Rich Grise <> wrote:


    ["sticky" buttons]

    > No need for anything fancy...why not just change this:
    >
    > <A HREF="javascript:nada()"
    > onMouseOver="hiLite('img01','button1___up'); top.status = 'Target
    > 1'; return true"
    > onMouseOut="hiLite('img01','button1_init'); top.status = ''; return
    > true"
    >
    > onClick="hiLite2('img01','button1_down','button1_init','target1.html');
    > return false"><IMG
    > NAME="img01" SRC="button1_init.gif" width=36 height=32
    > border=0></A>
    >
    > with this:
    >
    > <A HREF="javascript:nada()"
    > onMouseOver="hiLite('img01','button1___up'); top.status = 'Target
    > 1'; return true"
    > onMouseOut="hiLite('img01','button1_init'); top.status = ''; return
    > true"
    >
    > onClick="hiLite2('img01','button1_down','button1_init','target1.html');
    > return false"><IMG
    > NAME="img01" SRC="button1_down.gif" width=36 height=32
    > border=0></A>
    >
    > Since the page originally loads with page 1 already loaded, just go ahead
    > and set the image to button1_down.gif right from the start.


    OK, I've done that, and now I get this:
    http://mysite.verizon.net/richgrise/magicbuttons.mod2/demo_stickyframes.html

    The reason I asked in the first place is because I don't understand how he
    resets the other buttons.

    Or is there a better or more elegant way to do this? Somehow, I don't
    trust a programmer whose comments include "Aint it cool?" (i'd have
    thought an array would be good to work with, but I'm still a JS noob,
    so I would need help with that anyway.)

    Thanks,
    Rich
     
    Rich Grise, May 30, 2008
    #4
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. DeeAnn
    Replies:
    4
    Views:
    7,679
  2. Preben Foss

    Sticky columns in JTabel

    Preben Foss, May 24, 2004, in forum: Java
    Replies:
    1
    Views:
    547
    Andrew Thompson
    May 25, 2004
  3. Replies:
    0
    Views:
    3,539
  4. Arthur
    Replies:
    0
    Views:
    421
    Arthur
    Feb 7, 2006
  5. Uriah Piddle

    Sticky Posts in GridView

    Uriah Piddle, Dec 2, 2006, in forum: ASP .Net
    Replies:
    3
    Views:
    306
    =?Utf-8?B?UGV0ZXIgQnJvbWJlcmcgW0MjIE1WUF0=?=
    Dec 3, 2006
Loading...

Share This Page