javascript – 使用DHTML事件onmouseover更改JSF命令按钮的图像

2019-06-13 23:23:11 阅读：136 来源： 互联网

我想在鼠标移过它时更改按钮的图像.

我骑着DHTML事件onmouseover,可以为我做,但是怎么样？

我还需要为它创建一个JavaScript吗？

我该怎么做才能让它发挥作用？

这是我目前的代码：

<h:commandButton class="btn" image="/resources/images/mainbtn1.png" onm ouseover="/resources/images/mainbtn2.png"/">

解决方法:

< h：commandButton image =“foo.png”>生成HTML< input type =“image”src =“foo.png”>. onm ouseover属性(就像所有on *属性一样)应该指向JavaScript函数.但是,您将图像路径放在那里.这只会导致JavaScript错误(如果您使用的是Firebug或WDT,您会注意到这一点).

您需要编写一些JS来相应地更改图像按钮的src属性：

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

不要忘记添加一个更改图像的onmouseout.

与具体问题无关,通常的做法是使用CSS背景图像. HTML< input type =“image”>在技术上有一个完全不同的目的.它表示一个图像映射,它允许您发送在图像映射中单击的位置的鼠标坐标.由于您没有使用静态图像,因此您显然对此信息不感兴趣.

例如.

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

产生

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

并添加此CSS(启动示例)

.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');
}

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

标签：javascript,jsf,jsf-2,html
来源： https://codeday.me/bug/20190613/1235991.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 使用DHTML事件onmouseover更改JSF命令按钮的图像