i want a simple custom hiliting button...

[robert]

hi!

I want to have a custom button change appearance when pressed and then
call a function and change back to its original appearance when released.

here's what i have now, which works mostly. "drop" is my handler for the
button, its argument tells me which button was pressed. i have a number
of these buttons and they are organized in a table.

there is a fair amount of superstition here, the result of many tiny
experiments i ended up with this which seems to work best:

<td>

<A HREF="javascript:drop(0)" onMouseDown="document.images[1].src = 'pressed.gif'"
onMouseOver="document.images[1].src = 'notpressed.gif'"
onMouseOut="document.images[1].src = 'notpressed.gif'"
onMouseUp="document.images[1].src = 'notpressed.gif'">

<IMG SRC="notpressed.gif" HEIGHT= "50" WIDTH= "50" ALIGN= "center" BORDER=0></a>

</td>


pressed.gif is the pressed button's appearance, likewise notpressed.gif
is the normal appearance.

i say this mostly works. there is something i am missing, because the
first press of the first button on a freshly loaded page is weird. and
it is different in different browsers.

in a newer Netscape, the first press first shows no button, then shows
the hilite button and then, when i release the button, it goes to
notpressed.gif. subsequently all buttons work perfectly.

in an older Netscape, the first presses don't work at all, it just shows
a dotted outline of the GIF, until i mouse furiously at a button for a
few strokes within a very short period of time. then all buttons
function perfectly.

in a newer IE, the fist press is a bit weird but all subsequent presses
are perfect, except i get a square hilite box around the button.

i would appreciate a push in the right direction.

-- rob

 

[Stuart Palmer]

Sounds like a caching issue to me, cache your images onload of the page then
the machine has the images when the user starts clicking.

Hope that helps, good luck.

Stu

PS also having a bunch of links forcing the use is bad for non JS users (i.e
your HREF="javascript:drop(0)" ), this won't work for non JS users.

hi!

I want to have a custom button change appearance when pressed and then
call a function and change back to its original appearance when released.

here's what i have now, which works mostly. "drop" is my handler for the
button, its argument tells me which button was pressed. i have a number
of these buttons and they are organized in a table.

there is a fair amount of superstition here, the result of many tiny
experiments i ended up with this which seems to work best:

<td>

<A HREF="javascript:drop(0)" onMouseDown="document.images[1].src = 'pressed.gif'"
onMouseOver="document.images[1].src = 'notpressed.gif'"
onMouseOut="document.images[1].src = 'notpressed.gif'"
onMouseUp="document.images[1].src = 'notpressed.gif'">

<IMG SRC="notpressed.gif" HEIGHT= "50" WIDTH= "50" ALIGN= "center"