Help please: Changing buton look in onmouseover...how?

Question

I have some buttons I created in JSC and placed on a page. These buttons have images on them. I'd like to change the appearance of the button when the user moves the mouse over the image. I could't find anything in the JSC help files on this, so I'm asking here.
How do you get the button that is being moused over to change either the image that is one it, or in some other way give the user feedback that that button is the one the mouse is over?
Thanks!

Answer 1

Hi,
Following are the steps I followed to chage the image
of a button for onmouseover event:
1. Drag and drop a button
2. In the properties sheet go to the image property
and click on the ... button
3. Choose the image you want on the button
4. Copy the image that you want displayed when the
mouseover event occurs to the resources folder
5. In the javascript section of the properties sheet,
click the ... button next to onmouseover property
6. Enter the following line of code
document.getElementById('form1:button1').src="resource
s/image1.gif"
7. Click on save and run the application
The line of code in the jsp source looks like this:
<h:commandButton binding="#{Page1.button1}"
id="button1" image="resources/heart.gif"
onmouseover="document.getElementById('form1:button1')
.src="resources/image001.gif""
style="left: 144px; top: 72px; position: absolute"
value="Submit"/>
Hope this helps
Cheers
Giri :-)
Creator Teami'm trying to do a mouse over effect on my buttons where they swap images everytime a mouse hovers over the button. I've tried to enter the javascript line you suggest, here what i put:
document.getElementByld('form1:button1').src="resources/home01.jpg"
It puts in the jsp code that you show and I have the images in the resources folder, but when I save and run, I only see the error sign at the bottom of the page. No mouse over effect. Any ideas?
Thanks for any suggestions