Jér*_*nge 7 html javascript image button
我需要创建一个仅由图像组成的简单按钮,当用户点击它时,它将打开一个JQuery Dialog.
我在做一些阅读,并通知了许多解决方案:<button>,<image>用<a>,使用CSS来修改按钮的背景,等等.
这很令人困惑,实现我的图像按钮的正确方法是什么？
谢谢.
PS:按钮/图像应该是可聚焦的.欢迎使用JSFiddle操作示例.
正确的方法很大程度上取决于JavaScript无法使用时按钮的作用.
如果您要提交表格,那么:
<button> <img src="..." alt="..."> </button>
如果您要转到URL,那么:
<a href="..."> <img src="..." alt="..."> </a>
如果你绝对不做任何事情(通常不是一个好主意,你应该遵循渐进增强和不引人注目的JavaScript的原则,但如果你只是首先使用JavaScript生成按钮并且对用户的损失是方便的话,则可以接受然后基本功能):
<button type="button"> <img src="..." alt="..."> </button>
然后,您将JavaScript绑定到表单的提交事件或按钮/锚点击事件,并阻止默认行为,以便不提交表单/如果JavaScript成功执行,则不会遵循链接.
经过多次努力,我找到了解决方案:http://jsfiddle.net/YRY8M/3/.
<html>
<head></head>
<body>
<input type="image" tabindex="0" onclick="doSomething()" src="http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG"
/>
<br />
<button tabindex="1">I am focussable too !!!</button>
</body>
</html>
还有一些javascript:
function doSomething() {
alert('Hello!');
}