7

我需要创建一个仅由图像组成的简单按钮，当用户单击它时，它将打开一个 JQuery 对话框。

我正在阅读并注意到许多解决方案：<button>，<image>使用 a <a>，使用 CSS 修改按钮背景等...

这令人困惑，实现我的图像按钮的正确方法是什么？

谢谢。

PS：按钮/图像应该是可聚焦的。欢迎使用可操作的 JSFiddle 示例。

4

8 回答 8

9

正确的方法很大程度上取决于如果 JavaScript 不可用，按钮将做什么。

如果您要提交表格，那么：

<button> <img src="..." alt="..."> </button>

如果您要转到一个 URL，那么：

<a href="..."> <img src="..." alt="..."> </a>

如果你什么都不做（通常不是一个好主意，你应该遵循Progressive Enhancement和Unobtrusive JavaScript的原则，但如果你首先只用 JavaScript 生成按钮并且对用户的损失是方便而不是然后是基本功能）：

<button type="button"> <img src="..." alt="..."> </button>

然后，您将 JavaScript 绑定到表单的提交事件或按钮/锚点的单击事件，并阻止默认行为，因此如果 JavaScript 成功执行，则不会提交表单/不会跟踪链接。

于 2013-01-03T14:00:02.947 回答
6

创建一个按钮并为其放置background-image。检查小提琴。 http://jsfiddle.net/siyakunde/Y38nz/

于 2013-01-08T10:38:35.047 回答
5

经过多次努力，我找到了解决方案：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!'); 
}
于 2013-01-11T08:55:45.987 回答
3

这取决于您在每种情况下都想做什么。没有指导方针说“你应该这样做”，但有些情况下某些情况比其他情况更合适。

例如，根据这篇<button>评论，8 及以下版本的 IE在尝试将其用作提交按钮时，在标签方面存在一些错误行为。

但是<button>HTML5 中添加了一些新属性，您可以在此处看到，其中autofocus包括大多数现代主流浏览器将支持的其他有用的属性。

在您想要保持“焦点”的情况下（我假设带有选项卡支持），如果您使用单个<image>作为按钮（带有或不带有<a>），则必须添加一些 JS 代码以使图像在适当时具有焦点选项卡被按下。所以你将不得不编写更多的代码来做同样的事情。

还有一种可能适合您的解决方案，因为您不需要将表单提交到服务器端。使用<input type="image"类型并src在其中定义属性，将是可聚焦的，并且不需要运行任何 JS 代码或任何困难的 CSS。你可以在这里找到更多关于它的语法

因此，最终由您决定使用其中的哪一个。我会使用我认为更灵活、更容易编码、易于重用且大多数目标浏览器都支持的那个。

于 2013-01-05T16:03:15.103 回答
3

使用 jQuery，就像你拥有它一样......

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.8.3.js"></script>

        <style type="text/css">
            #theBtn{
                margin: 20% auto 0;
                background: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
                width: 100px;
                height: 50px;
            }
        </style>
    </head>
    <body>
        <div id="theBtn"></div>

        <script type="text/javascript">
            $(document).ready(function(){
                $("#theBtn").click(function(){
                    if(confirm('Are you sure?')){
                        $("#theBtn").fadeOut('slow');
                    }
                });
            });
        </script>
    </body>
</html>
于 2013-01-11T13:22:37.597 回答
3

在<button>tag 中，放置您的图像，并附加一个点击事件以<button>在点击时打开对话框。
JSFiddle

于 2013-01-11T15:10:55.523 回答
2

首先，有一个图像或一个按钮。但不是两者兼而有之。我想说，创建一个图像并将您的代码放在该图像的 onclick() 函数中。

 var img= $("#my-image-id");
    image.click(function() {
    // your code here
    }
于 2013-01-03T13:53:31.180 回答
2

据我所知，您无法更改 Safari 按钮的外观，这就是我建议使用a该解决方案的原因。这是我的简单代码：http: //jsfiddle.net/djgBK/1/

依据是：

  1. 取一个a元素把链接内容放在左边，

  2. 然后用实际上是背景的图像替换它。因为它的a元素用户只能使用TAB按钮来选择它。

更重要的是，使用aelemet 将让您放置title将在悬停/进入按钮后显示的内容。

于 2013-01-11T08:53:04.090 回答