Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > "sticky" buttons?

Reply
Thread Tools

"sticky" buttons?

 
 
Rich Grise
Guest
Posts: n/a
 
      05-28-2008
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/...ckyframes.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/...ckyframes.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_i nit','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_i nit','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_i nit','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_i nit','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


 
Reply With Quote
 
 
 
 
Tom Cole
Guest
Posts: n/a
 
      05-29-2008
On May 28, 12:09*pm, Rich Grise <(E-Mail Removed)> 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/...ckyframes.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/...emo_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_i nit','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_i nit','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_i nit','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_i nit','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_i nit','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_i nit','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.

 
Reply With Quote
 
 
 
 
Rich Grise
Guest
Posts: n/a
 
      05-29-2008
On Thu, 29 May 2008 08:29:03 -0700, Tom Cole wrote:

> On May 28, 12:09*pm, Rich Grise <(E-Mail Removed)> wrote:

["sticky" buttons]

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

Thanks! I'll be doing that today!

Cheers!
Rich

 
Reply With Quote
 
Rich Grise
Guest
Posts: n/a
 
      05-30-2008
On Thu, 29 May 2008 08:29:03 -0700, Tom Cole wrote:

> On May 28, 12:09*pm, Rich Grise <(E-Mail Removed)> 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_i nit','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_i nit','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/...ckyframes.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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off




Advertisments