Re: A simple script for Up/Over/Down buttons?

Let me get this straight, you want an image's source to be switched
when you mousedown on it, then change back when you mouseup, correct?

That's not all TOO hard. All you have to do is add this to the <img>
tag that you wnat to have this effect:

1. onMouseDown = "this.src='*pathToMouseDownImageFile*'"
2. onMouseUp = " this.src= ' *pathToMouseUpImageFile* ' "
3. onMouseOut = " this.src= ' *pathToMouseUpImageFile* ' "

Then replace *pathToMouseDownImageFile* with the image you want shown
when the user has the mouse button down and *pathToMouseUpImageFile*s
with the image you want shown when the user lets go of the mouse
button. That should do what you want.

I'm a total web newbie using Dreamweaver 2 to make a homepage.

You really shouldn't use a WYSIWYG editor. From my experience, they
write shoddy HTML that is a pain to maintain and it's easier to control
HTML that you write yourself. Try
http://www.w3schools.com/html/html_reference.asp. That's the site that
taught me HTML.

Mike


Badabing wrote:

Hi folks, wonder if you can help me.

I'm a total web newbie using Dreamweaver 2 to make a homepage. I've
figured
out the Rollover Image option to make buttons - all very
straightforward.
But what I really want is the ability to have a 'button down' image
to show
that a link has been clicked.

I've looked up how to do this and a lot of sites say I just need to
insert a
Navigation Bar from the object menu, but I don't have this option in
DW2. I
guess therefore I need a little javascipt to achieve this? Is this
correct?
Does anyone have a 'standard' script I can use, where I can just
replace the
image names as appropriate? How else can I get round this? All I have
is
DW2.

TIA

in article cc6mb5$esq (AT) odah37 (DOT) prod.google.com, ekimnosnews (AT) hotmail (DOT) com at
ekimnosnews (AT) hotmail (DOT) com wrote on 3/7/04 5:19 PM:

Let me get this straight, you want an image's source to be switched
when you mousedown on it, then change back when you mouseup, correct?

That's not all TOO hard. All you have to do is add this to the <img
tag that you wnat to have this effect:

1. onMouseDown = "this.src='*pathToMouseDownImageFile*'"
2. onMouseUp = " this.src= ' *pathToMouseUpImageFile* ' "
3. onMouseOut = " this.src= ' *pathToMouseUpImageFile* ' "

Then replace *pathToMouseDownImageFile* with the image you want shown
when the user has the mouse button down and *pathToMouseUpImageFile*s
with the image you want shown when the user lets go of the mouse
button. That should do what you want.

I'm not sure if that is really what I want. What I would like to achieve is
a button (all my buttons are held in a left-hand side frame) that the user
clicks, then the page in the main frame changes and the button remains in a
'pressed down' state, as if the user has literally pressed the button down.

The button would stay in this state until the user clicks ANOTHER button.

Then the pressed-down button returns to the UP position, and the newly
pressed button goes to the BUTTON DOWN mode. It's to make it seem like they
are really pressing buttons, if you see what I mean.

Does that make sense?

On Sat, 03 Jul 2004 23:07:58 +0100, Badabing <bada (AT) boom (DOT) com.fake.addy>
wrote:

in article cc6mb5$esq (AT) odah37 (DOT) prod.google.com, ekimnosnews (AT) hotmail (DOT) com at
ekimnosnews (AT) hotmail (DOT) com wrote on 3/7/04 5:19 PM:

Let me get this straight, you want an image's source to be switched
when you mousedown on it, then change back when you mouseup, correct?

That's not all TOO hard. All you have to do is add this to the <img
tag that you wnat to have this effect:

1. onMouseDown = "this.src='*pathToMouseDownImageFile*'"
2. onMouseUp = " this.src= ' *pathToMouseUpImageFile* ' "
3. onMouseOut = " this.src= ' *pathToMouseUpImageFile* ' "

Then replace *pathToMouseDownImageFile* with the image you want shown
when the user has the mouse button down and *pathToMouseUpImageFile*s
with the image you want shown when the user lets go of the mouse
button. That should do what you want.


I'm not sure if that is really what I want. What I would like to achieve is
a button (all my buttons are held in a left-hand side frame) that the user
clicks, then the page in the main frame changes and the button remains in a
'pressed down' state, as if the user has literally pressed the button down.

The button would stay in this state until the user clicks ANOTHER button.

Then the pressed-down button returns to the UP position, and the newly
pressed button goes to the BUTTON DOWN mode. It's to make it seem like they
are really pressing buttons, if you see what I mean.

Does that make sense?

Then just don't use the onMouseUp and on MouseOut handlers. Also, it
would be compatible with earlier browsers if you put you event handler
in the A tag:

<a href="#"
onMouseOver="document.test.src='down.gif';
top.mainframe.location='new_page.html';" ><img
src="up.gif" NAME = "test" BORDER="0"></a>

Then when your user presses the other button, set the button back to
up:
document.test.src='up.gif'

You can do this in the HTML tag or in the function that changes the
page:

function change_page() {
document.test.src='up.gif';
top.mainframe.location="new_page.html";
}

If the normal state for the bottons is up, you can write a single
function which sets all of the buttons to up and then set your current
button to down. Then you could do something like this:

<a href="#"
onMouseOver="setAllButtonsUp();document.test.src=' down.gif';
top.mainframe.location='new_page.html';" ><img
src="up.gif" NAME = "test"></a>


Or, you could also create a function to change the pages and set the
buttons to down:

function change_page(upname, upbutton, page) {
document['name'].src=upbutton;
top.mainframe.location=page;
}


Then you could have the mor elegant:

<a href="#"

onMouseOver="setAllButtonsUp();change_page('test1' ,'down1.gif','page1.html');"

img src="up1.gif" NAME = "test1" BORDER="0"></a

<a href="#"

onMouseOver="setAllButtonsUp();change_page('test2' ,'down2.gif,'page2.html');"

img src="up2.gif" NAME = "test2" BORDER="0"></a

ETC

Myron Turer

Myron Turner
www.room535.org

Myron Turner wrote:

<--snip-->

Then you could have the mor elegant:

a href="#"

onMouseOver="setAllButtonsUp();change_page('test1' ,'down1.gif','page1.html');"
img src="up1.gif" NAME = "test1" BORDER="0"></a

a href="#"

onMouseOver="setAllButtonsUp();change_page('test2' ,'down2.gif,'page2.html');"
img src="up2.gif" NAME = "test2" BORDER="0"></a

Except that you want to do it onclick, not onMouseOver


--
Randy
Chance Favors The Prepared Mind
comp.lang.javascript FAQ - http://jibbering.com/faq/

On Sat, 03 Jul 2004 23:53:34 -0400, Randy Webb
<hikksnotathome (AT) aol (DOT) com> wrote:

Myron Turner wrote:

--snip--


Then you could have the mor elegant:

a href="#"

onMouseOver="setAllButtonsUp();change_page('test1' ,'down1.gif','page1.html');"
img src="up1.gif" NAME = "test1" BORDER="0"></a

a href="#"

onMouseOver="setAllButtonsUp();change_page('test2' ,'down2.gif,'page2.html');"
img src="up2.gif" NAME = "test2" BORDER="0"></a


Except that you want to do it onclick, not onMouseOver


Right! (The pitfalls of cut and paste.)

Myron Turner
Myron Turner
www.room535.org

in article 40e75cae.139896700 (AT) news (DOT) wp.shawcable.net, Myron Turner at
turnermm (AT) shaw (DOT) ca wrote on 4/7/04 3:07 AM:

On Sat, 03 Jul 2004 23:07:58 +0100, Badabing <bada (AT) boom (DOT) com.fake.addy
wrote:

in article cc6mb5$esq (AT) odah37 (DOT) prod.google.com, ekimnosnews (AT) hotmail (DOT) com at
ekimnosnews (AT) hotmail (DOT) com wrote on 3/7/04 5:19 PM:

Let me get this straight, you want an image's source to be switched
when you mousedown on it, then change back when you mouseup, correct?

That's not all TOO hard. All you have to do is add this to the <img
tag that you wnat to have this effect:

1. onMouseDown = "this.src='*pathToMouseDownImageFile*'"
2. onMouseUp = " this.src= ' *pathToMouseUpImageFile* ' "
3. onMouseOut = " this.src= ' *pathToMouseUpImageFile* ' "

Then replace *pathToMouseDownImageFile* with the image you want shown
when the user has the mouse button down and *pathToMouseUpImageFile*s
with the image you want shown when the user lets go of the mouse
button. That should do what you want.


I'm not sure if that is really what I want. What I would like to achieve is
a button (all my buttons are held in a left-hand side frame) that the user
clicks, then the page in the main frame changes and the button remains in a
'pressed down' state, as if the user has literally pressed the button down.

The button would stay in this state until the user clicks ANOTHER button.

Then the pressed-down button returns to the UP position, and the newly
pressed button goes to the BUTTON DOWN mode. It's to make it seem like they
are really pressing buttons, if you see what I mean.

Does that make sense?


Then just don't use the onMouseUp and on MouseOut handlers. Also, it
would be compatible with earlier browsers if you put you event handler
in the A tag:

a href="#"
onMouseOver="document.test.src='down.gif';
top.mainframe.location='new_page.html';" ><img
src="up.gif" NAME = "test" BORDER="0"></a

Then when your user presses the other button, set the button back to
up:
document.test.src='up.gif'

You can do this in the HTML tag or in the function that changes the
page:

function change_page() {
document.test.src='up.gif';
top.mainframe.location="new_page.html";
}

If the normal state for the bottons is up, you can write a single
function which sets all of the buttons to up and then set your current
button to down. Then you could do something like this:

a href="#"
onMouseOver="setAllButtonsUp();document.test.src=' down.gif';
top.mainframe.location='new_page.html';" ><img
src="up.gif" NAME = "test"></a


Or, you could also create a function to change the pages and set the
buttons to down:

function change_page(upname, upbutton, page) {
document['name'].src=upbutton;
top.mainframe.location=page;
}


Then you could have the mor elegant:

a href="#"

onMouseOver="setAllButtonsUp();change_page('test1' ,'down1.gif','page1.html');"
img src="up1.gif" NAME = "test1" BORDER="0"></a

a href="#"

onMouseOver="setAllButtonsUp();change_page('test2' ,'down2.gif,'page2.html');"
img src="up2.gif" NAME = "test2" BORDER="0"></a

ETC

Myron Turer

Myron Turner
www.room535.org

Thanks for that, although it's still pretty confusing as I'm a total newbie
at this. I am currently using a WYSIWYG editor, Dreamweaver 2, and it gives
me the option to Insert Script. Can I literally copy and paste what you've
posted above, into the Script dialogue box in Dreamweaver (substituting the
image names obviously)?

Appreciate the help. Thanks.

On Sun, 04 Jul 2004 08:49:15 +0100, Badabing <bada (AT) boom (DOT) com.fake.addy>
wrote:

If the normal state for the bottons is up, you can write a single
function which sets all of the buttons to up and then set your current
button to down.

function setAllButtonsUp() {
document.button1.src=upbutton1;
document.button2.src=upbutton2
document.button3.src=upbutton3;
//ETC
}

you could also create a function to change the pages and set the
buttons to down:


function change_page(upname, upbutton, page) {
document['name'].src=upbutton;
top.mainframe.location=page;
}


Then you could have the more elegant:

a href="#"

onclick="setAllButtonsUp();change_page('test1','do wn1.gif','page1.html');"
<img src="up1.gif" NAME = "test1" BORDER="0"></a>

a href="#"

onclick="setAllButtonsUp();change_page('test2','do wn2.gif,'page2.html');"
<img src="up2.gif" NAME = "test2" BORDER="0"></a>

ETC


Myron Turner
www.room535.org

Thanks for that, although it's still pretty confusing as I'm a total newbie
at this. I am currently using a WYSIWYG editor, Dreamweaver 2, and it gives
me the option to Insert Script. Can I literally copy and paste what you've
posted above, into the Script dialogue box in Dreamweaver (substituting the
image names obviously)?

Appreciate the help. Thanks.

I don't use Dreamweaver but I don't see why not--remembering to change
onMouseOver to onclick, as above (see Randy Webb's post).

Myron Turner
Myron Turner
www.room535.org