4

I want to change the image of my button when the mouse goes over it.

I rode the DHTML event onmouseover, can do that for me, but how?

Do i need to create a javascript also for it?

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"/">
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
javing
  • 12,307
  • 35
  • 138
  • 211
  • try `onmouseover="this.image='anotherimage.png'"`, `onmouseover="this.src='anotherimage.png'"`works for `` element so maybe this one works the same. – user219882 Sep 02 '11 at 15:28

2 Answers2

6

The <h:commandButton image="foo.png"> generates a HTML <input type="image" src="foo.png">. The onmouseover attribute (like as all on* attributes) should point to JavaScript functions. However, you're putting the image path plain there. This would only result in a JavaScript error (which you would have noticed if you were using Firebug or WDT).

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

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

Don't forget to add an onmouseout which changes the image back.

Unrelated to the concrete problem, the normal practice is to use CSS background images for this. The HTML <input type="image"> has technically an entirely different purpose. It represents namely an image map which allows you to send the mouse coordinates of where you have clicked in the image map. You're apparently not interested in this information as you're not using a static image.

E.g.

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

which generates

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

and add this CSS (kickoff 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');
}

This is not only better reuseable/maintainable, but also doesn't require JS support.

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
  • That is just what i needed. But also i think in sometimes if ever in the future i need to do something similar, but lets say display a panel when the mouse is over, in that case i will need the java script right? Thanks for help. – javing Sep 02 '11 at 16:38
  • 1
    If it can't be done with HTML, look at CSS. If it can't be done with CSS, look at JS. – BalusC Sep 02 '11 at 16:44
1

Yes, all onXXX attributes are for JavaScript event handlers. You need to have a JavaScript function written for that. Something like this:

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

And invoked using:

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

Note: I can't provide you the exact JavaScript as it entirely depends on how the markup is generated by the JSF library that you're using.

adarshr
  • 61,315
  • 23
  • 138
  • 167
  • Great answer, thanks. But i realised that for this one it could be done with no need of javascript. Thanks for your answer i am sure will be useful in the future. +1 – javing Sep 02 '11 at 16:40