Geek Answers Handbook

Change JSF command element image with DHTML onmouseover event

I want to change the image of my button when the mouse passes through it.

I went to the DHTML onmouseover event, I can do it for me, but how?

Do I need to create javascript?

What should I do to make it work?

This is my current code:

<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="/resources/images/mainbtn2.png"/">
+4
source share
2 answers

<h:commandButton image="foo.png"> generates HTML <input type="image" src="foo.png"> . The onmouseover attribute (like all on* attributes) should point to JavaScript functions. However, you put the image path equal. This will only result in a JavaScript error (which you would notice if using Firebug or WDT).

You need to write some JS that changes the src attribute of the image button accordingly:

 onmouseover="this.src='/resources/images/mainbtn2.png'"

Remember to add onmouseout , which will change the image back.

Unrelated to a specific problem, it is common practice to use CSS background images for this. HTML <input type="image"> has a technically completely different purpose. It is an image map that allows you to send the coordinates of the mouse where you clicked on the image map. You are apparently not interested in this information because you are not using a static image.

eg.

 <h:commandButton value="" styleClass="mybutton" />

which generates

 <input type="submit" value="" class="mybutton" />

and add this CSS (run example)

 .mybutton { margin: 2px; padding: 0; border: 0; width: 100px; height: 20px; background-image: url('foo.png'); cursor: pointer; overflow: visible; } .mybutton:hover { background-image: url('bar.png'); }

It is not only better to use / maintain, but also does not require JS support.

+6
source

Yes, all onXXX attributes are for JavaScript event handlers. To do this, you need to write a JavaScript function. Something like that:

 function changeImage() { this.style.backgroundImage = "url('path/to/image.png')"; }

And called with:

 <h:commandButton class="btn" image="/resources/images/mainbtn1.png" onmouseover="changeImage()" />

Note. I cannot provide you with accurate JavaScript, as it depends entirely on how the markup is created using the JSF library that you use.

+1
source

More articles:


All Articles