button question

[Yaqian Fang]

Hi, could anyone please tell me how to make a button look like "being clicked"?
A button picture always looks static, though a link is associated with it.
Thank you.

[Evertjan.]

Yaqian Fang wrote on 07 nov 2004 in comp.lang.javas cript:

Hi, could anyone please tell me how to make a button look like "being
clicked"? A button picture always looks static, though a link is
associated with it. Thank you.

<button onclick="this.s tyle.color='red '">
click me and stay red</button>

<button onclick="this.d isabled=true">
click me once only</button>
<button onclick="this.s tyle.borderStyl e='inset';this. disabled=true">
depress me once only</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

[Fred Oz]

Yaqian Fang wrote:

Hi, could anyone please tell me how to make a button look like "being clicked"?
A button picture always looks static, though a link is associated with it.
Thank you.

Create a "clicked" image and onmousedown change to it. onmouseup change
back.

Fred.

[mscir]

Evertjan. wrote:

Yaqian Fang wrote on 07 nov 2004 in comp.lang.javas cript:

Hi, could anyone please tell me how to make a button look like "being
clicked"? A button picture always looks static, though a link is
associated with it. Thank you.

<button onclick="this.s tyle.color='red '">
click me and stay red</button>

<button onclick="this.d isabled=true">
click me once only</button>

<button onclick="this.s tyle.borderStyl e='inset';this. disabled=true">
depress me once only</button>

Evertjan,

very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.d isabled=true;th is.value='Pleas e Wait...';">clic k
me once only</button>

Mike

[Evertjan.]

mscir wrote on 07 nov 2004 in comp.lang.javas cript:

very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.d isabled=true;th is.value='Pleas e Wait...';">clic k
me once only</button>

Nice idea!

This does work, but it should not, me thinks(...?)
innerHTML seems the way to go.

<button
onclick="this.d isabled=true;th is.innerHTML='P lease Wait...';">
click me once only</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

[mscir]

Evertjan. wrote:

mscir wrote on 07 nov 2004 in comp.lang.javas cript:

very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.d isabled=true;th is.value='Pleas e Wait...';">clic k
me once only</button>

Nice idea!

This does work, but it should not, me thinks(...?)
innerHTML seems the way to go.

<button
onclick="this.d isabled=true;th is.innerHTML='P lease Wait...';">
click me once only</button>

Good point, I found this with google... it discusses both approaches and
their potential problems, and has code to handle more than one browser:

http://www.permadi.com/tutorial/jsInnerHTMLDOM/

Here's an example using that code, it works on my IE 6, Netscape 7.2,
Moz 1.7.3, Firefox 1.0 pr:

<script type="text/javascript">
function replaceButtonTe xt(buttonId, text){
if (document.getEl ementById) {
var button=document .getElementById (buttonId);
if (button) {
if (button.childNo des[0]) {
button.childNod es[0].nodeValue=text ;
} else if (button.value) {
button.value=te xt;
} else { //if (button.innerHT ML)
button.innerHTM L=text;
}
}
}
}
</script>

<button id="b1" onclick="replac eButtonText('b1 ', 'Please Wait
1...');">click me once only</button>
<br>
<button id="b2" onclick="replac eButtonText('b2 ', 'Please Wait
2...');">click me once only</button>

Mike

[Yaqian Fang]

Thank you all very much!

mscir wrote on 07 nov 2004 in comp.lang.javas cript:

very nice examples. I added a bit of code to the 2nd one:

<button onclick="this.d isabled=true;th is.value='Pleas e Wait...';">clic k
me once only</button>

Nice idea!

This does work, but it should not, me thinks(...?)
innerHTML seems the way to go.

<button
onclick="this. disabled=true;t his.innerHTML=' Please Wait...';">
click me once only</button>

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress,
but let us keep the discussions in the newsgroup)

[mscir]

mscir wrote:
<snip>

<script type="text/javascript">
function replaceButtonTe xt(buttonId, text){
if (document.getEl ementById) {
var button=document .getElementById (buttonId);
if (button) {
if (button.childNo des[0]) {
button.childNod es[0].nodeValue=text ;
} else if (button.value) {
button.value=te xt;
} else { //if (button.innerHT ML)
button.innerHTM L=text;
}
}
}
}
</script>

<button id="b1" onclick="replac eButtonText('b1 ', 'Please Wait
1...');">click me once only</button>

This might work on more browsers, if support for "this" is better than
for getElementById.

function replaceButtonTe xt(btn, text){
//alert('btn.chil dNodes[0] '+btn.childNode s[0]+'\nbtn.value
'+btn.value+'\n btn.innerHTML '+btn.innerHTML );
if (btn.childNodes[0]) {
btn.childNodes[0].nodeValue=text ;
} else if (btn.value) {
btn.value=text;
} else { //if (button.innerHT ML)
btn.innerHTML=t ext;
}
}

<button id="b1" onclick="replac eButtonText(thi s, 'Please Wait
....');">click me once only</button>

Mike