"sticky" buttons?

R

Rich Grise

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
 
T

Tom Cole

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
Click to expand...

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.
 
R

Rich Grise

On May 28, 12:09 pm, Rich Grise <[email protected]> wrote:
Click to expand...

["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.
Click to expand...

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
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to position the *tooltip* comment on these buttons? 9
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3
Buttons lining up 1
Working on mobile css menu with plenty of frustration! 2
How can I arrange a series of radio buttons? 2
Final chapter of "Learn PHP, MySQL and JavaScript" 3
? Trouble with: passing dragElement(e.target.id); 8
Help with my responsive home page 2

Members online

No members online now.
Total: 76 (members: 0, guests: 76)
Robots: 368

Forum statistics

Threads
473,982
Messages
2,570,185
Members
46,736
Latest member
AdolphBig6

Latest Threads

Top