Question

我知道按钮的语法

$("#divId").button();

但我想用图像。我申请了

$("img").click(function(){......});

效果不错但点击图片不会产生点击效果。如何在图像上添加点击效果。

Answer 1

<html>

<head>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">


$(document).ready(function(){


    $(".imgclick").mousedown(function(){


        var mrgtb = parseInt($(this).css("margin-top"));

        var mrglf = parseInt($(this).css("margin-left"));

        mrgtb=mrgtb+3;

        mrglf=mrglf+3;

            $(this).css("margin-top",mrgtb+"px").css("margin-left",mrglf+"px");


    }).mouseup(function(){

        var mrgtb = parseInt($(this).css("margin-top"));

        var mrglf = parseInt($(this).css("margin-left"));

        mrgtb=mrgtb-3;

        mrglf=mrglf-3;

            $(this).css("margin-top",mrgtb+"px").css("margin-left",mrglf+"px");

    }); 

});

</script>

</head>

<body>
<p>Hello</p>

<span>World</span><input id="a" class="imgclick" style="outline: none;" type="image" src="a.jpg" width="30px" height="30px" border="0" >



</body>

</html>

Answer 2

您希望获得图像或文字的按钮效果。请从下面的链接下载图像或创建自己的图像。

HTML：

<a class="button" href="#"><span>Bring world peace</span></a>

CSS：

.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('bg_button_a.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('bg_button_span.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
}

Answer 3

在脚本标签中为图像div写入打击代码并将图像标签放在div中喜欢它在这里完成

$（document）.ready（function（）{

$("#clickimage").click(function(){
    alert("image is clicked");  

});

}）;

   <!--<div id="clickimage"><img src="wc.png" width="100" height="100"></div>-->

Answer 4

以下是使用mousedown和mouseup事件添加点击效果的另一种简单方法。当边距被修改时，我观察到窗口中的其他控件移位。我在下面给出了一个简单的解决方案来获得使用边框的点击效果。

$(".imgclick").mousedown(function () {

    $(this).css("border", "1px solid #ECECEC");

}).mouseup(function () {

    $(this).css("border", "none");
});

使用图像作为jquery中的按钮，点击效果

4 个答案: