Javascript HTML/JS：对创建图像按钮的方法感到困惑_Javascript_Html_Image_Button

Javascript HTML/JS：对创建图像按钮的方法感到困惑

javascript html image button

Javascript HTML/JS：对创建图像按钮的方法感到困惑,javascript,html,image,button,Javascript,Html,Image,Button,我需要创建一个仅由图像组成的简单按钮，当用户单击它时，它将打开一个JQuery对话框我正在读一些书，并注意到许多解决方案：，带有，使用CSS修改按钮背景，等等这令人困惑，什么是实现我的图像按钮的正确方法谢谢 p.S.：按钮/图像应可聚焦。欢迎使用一个可操作的JSFIDLE示例。首先，它有一个图像或一个按钮。但不是两者都有。我会说，创建一个图像并将代码放在该图像的onclick（）函数中 var img= $("#my-image-id"); image.click(functi

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

我正在读一些书，并注意到许多解决方案：

，

带有

，使用CSS修改按钮背景，等等

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

谢谢

p.S.：按钮/图像应可聚焦。欢迎使用一个可操作的JSFIDLE示例。

首先，它有一个图像或一个按钮。但不是两者都有。我会说，创建一个图像并将代码放在该图像的onclick（）函数中

 var img= $("#my-image-id");
    image.click(function() {
    // your code here
    }

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

如果您要提交表格，则：

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

如果要转到URL，则：

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

如果您完全不打算做任何事情（通常不是一个好主意，您应该遵循和的原则，但是如果您首先只使用JavaScript生成按钮，并且用户的损失是方便，而不是基本功能，那么这是可以接受的）：

然后将JavaScript绑定到表单的提交事件或按钮/锚点的单击事件，这样，如果JavaScript成功执行，表单将不会被提交/链接将不会被遵循。

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

例如，根据review，IE 8及以下版本在尝试将其用作提交按钮时，在

标记方面存在一些错误行为

Η尽管

在HTML5中添加了一些您可以看到的新属性，但它们是

自动聚焦

和其他大多数现代主流浏览器都支持的有用属性

如果您想保持“焦点”（我假设有标签支持），如果您使用单个

作为按钮（带或不带


因此，最终由您决定使用其中的哪一个。
我会使用我认为更灵活、更容易编写代码、易于重用且大多数目标浏览器都支持的浏览器。
创建一个按钮并为其放置背景图像。
检查小提琴。
据我所知，您无法更改Safari按钮的外观，因此我建议使用a
作为解决方案。以下是我的简单代码：
其依据是：
取一个a
元素，将链接内容放在左侧
然后将其替换为实际背景图像。因为它是a
元素，用户只能使用TAB
按钮选择它
更重要的是，使用a
elemet将允许您放置标题
，在将鼠标悬停/输入按钮后将显示该标题。
经过多次努力，我找到了解决方案：
在拥有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>


#theBtn{
利润率：20%自动0；
背景：url（'http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/White_and_yellow_flower.JPG/320px-White_and_yellow_flower.JPG');
宽度：100px；
高度：50px；
}
$（文档）.ready（函数（）{
$（“#theBtn”）。单击（函数（）{
如果（确认（'你确定吗？'））{
$（“#theBtn”）.fadeOut（'slow'）；
}
});
});
在
标签内，放置图像，并将单击事件附加到
以打开单击对话框。


不要这样做。图像将不可聚焦（因为图像不是为交互控件设计的）。人们使用（例如）键盘在页面中导航（而不是鼠标等定点设备）无法导航到图像并激活控件。该按钮显示一个带有自动完成的模式框。关闭时，所选值显示在div中，并用于使用计时器每秒计算另一个值。因此，我应该使用哪种方法，因为它不适合上述任何情况？谢谢。操作JSFIDLEld帮助。谢谢。很高兴你找到了适合你的解决方案！似乎这与我提出的更适合你的解决方案是一样的，因为现在没有其他评论提到这一点，所以如果你希望你可以接受我的回答。
<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>

function doSomething() {
  alert('Hello!'); 
}

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