Question

我正在尝试用图像替换我的按钮，但无论我做什么都不会改变。这是我试图这样做的方法，我的方法有什么问题吗？

<input id="deal"  class="button" name= "button" type="reset" value="Deal" SRC="/buttons/deal.png" 
     HEIGHT=38 WIDTH=62 
     ALT="Yes" BORDER=0 onclick="startRound();return false;">

Answer 1

您可以尝试这样：

<style type="text/css">
.buttonStyle {
border: none;
background: #FFF url('deal.png');
}
</style>
<input type="button" class="buttonStyle" value="Button"/>

同时检查Changing the Submit Button to an Image

Answer 2

试试这个兄弟

<input type="button" id="button1" value="Click Me" />
<script>
    $('#button1').click(function () {
        $(this).addClass("class1");
    });
</script>

，班级在这里

    .class1
    {
        height:40px;
        width:40px;
        background-size:100%;
        color:transparent;
        background-image:url('visual_studio_2012.png');
    }

使用您想要的任何图像，不要忘记添加jquery插件

Answer 3

尝试在图片中放置onclick个事件

<img onclick="ImageClick()" ></img>

Answer 4

我认为这是一个很好的解决方案。看看小提琴here。

<强>的JavaScript

var button = document.body.getElementsByTagName('input')[0];

(button.attachEvent) ? 
button.attachEvent('onclick', function (e) {
    if (button.className === 'button active') {
        button.className = 'button';
    } else {
        button.className = 'button active';
    };
}) :
button.addEventListener('click', function (e) {
    if (button.className === 'button active') {
        button.className = 'button';
    } else {
        button.className = 'button active';
    };
}, false);

<强> CSS

input[type="reset"] {
    padding: 10px 20px;
    border: none;
    font: bold 62px/normal Arial, sans-serif;
    text-transform: lowercase;
    color: white;
    cursor: pointer;
}
input[type="reset"].active {
    background: url('http://careers.microsoft.com/global/careers/EN/AU/PublishingImages/home_hero_au_690x294.jpg') no-repeat 0 0;
}

用图像替换输入按钮

4 个答案: