PDA

Click to See Complete Forum and Search --> : change button icon on click

seahorse32
11-25-2003, 03:24 PM
I see lots of examples on mouse overs but how do I get a button to change its image or icon when I click on it?
I with to click on a button which shows an image of a lightbulb "off" and when clicked it will show the lightbulb "on" image.
It is for a webpage.
It could be done in asp,javascript or html.
Thanks for the help
TheBearMay
11-25-2003, 03:33 PM
Try this:

<input name='B1' type='image' src='image1.gif' onclick='B1.src="Image2.gif"'></input>
seahorse32
11-25-2003, 03:40 PM
that works great to change from off to on.
what must be added so that I can turn the image back to off when I click it again?
This is what I have and would like to change the words to the gif icon. I would like to combine the two buttons into one so that one click turns it "on" and clicked again turns it off and so on.
<form method="POST">
<p><input type="hidden" name="control_device" value="bedroom bed light=on"> <input
type="submit" value="Bedroom Light" name="control_device"></p>
</form>
<form method="POST">
<p><input type="hidden" name="control_device" value="bedroom bed light=off"> <input
type="submit" value="Bed Lights Off" name="control_device"></p>
</form>
seahorse32
11-29-2003, 11:28 AM
This gives me the on and off buttons that work and shows an icon that when clicked or double clicked changes from an on light bulb to an off light bulb.
I would like to see the two combined to that all I see is the light bulb icon. When it is clicked it caused the on off script to work.
If this is impossible can a gif picture be assigned to the face of the button instead of the words "bedroom light".
This is to work with Homeseer a home automation software.



<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>

<body>

<form method="POST">
<p><input type="hidden" name="control_device" value="bedroom bed light=on"> <input
type="submit" value="Bedroom Light" name="control_device"></p>
</form>
<form method="POST">
<p><input type="hidden" name="control_device" value="bedroom bed light=off"> <input
type="submit" value="Bed Lights Off" name="control_device"></p>
</form>
<font face="verdana, arial, helvetica" size="2"><input name="B1" type="image"
src="light_on.gif" onclick="B1.src='light_off.gif'"else
ondblclick="B1.src='light_on.gif'" width="25" height="32"></font>

</body>

</html>

The form section works although if they can be combined to work with one button, maybe click and double click it would be better.
Secondly change the face of the one button to a picture or icon as in the script below the form.


Thanks for your help
seahorse32
darkwolf1
11-29-2003, 04:57 PM
http://caucuscare.com/~roth/JAVASCRIPT/ch16_05.htm