使用DHTML事件onmouseover更改JSF commandbutton的图像 [英] Change the image of a JSF commandbutton with DHTML event onmouseover

问题描述

我驾驶DHMML事件onmouseover，可以做到这一点，但怎么做？

我需要为它创建一个javascript吗？

我应该怎么做才能使它工作？

这是我目前的代码：

 < h：commandButton class =btnimage =/ resources / images / mainbtn1.pngonmouseover =/ resources / images / mainbtn2.png/> 
  

解决方案

< h：commandButton image =foo.png> 生成HTML < input type =imagesrc =foo.png> 。 onmouseover 属性（就像所有的在* 属性上一样）应该指向JavaScript函数，但是你将图像路径放在那里，这只会导致JavaScript错误如果你使用的是Firebug或WDT，会注意到）。

你需要写一些改变的JS

  onmouseover =这个图片按钮的 src 属性.src ='/ resources / images / mainbtn2.png'
  

不要忘记添加 onmouseout 这会将图像更改回来。

---

不相关具体的问题，正常的做法是使用CSS背景图像。 HTML < input type =image> 在技术上具有完全不同的目的。它表示一个图像地图，它允许您发送鼠标在图像地图中被点击的位置的坐标。您显然对此信息不感兴趣，因为您没有使用静态图片。

例如

 < h：commandButton value =styleClass =mybutton/> 
  

它会产生

 < input type =submitvalue =class =mybutton/> 
  

并添加此CSS（开球示例）

< pre class =lang-css prettyprint-override> .mybutton {
margin：2px;
padding：0;
border：0;
width：100px;
height：20px;
background-image：url（'foo.png'）;
光标：指针;
溢出：可见;
}

.mybutton：hover {
background-image：url（'bar.png'）;
}


这不仅可以更好地重复使用/维护，而且不需要JS支持。

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"/">

解决方案

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.

这篇关于使用DHTML事件onmouseover更改JSF commandbutton的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！