использовать изображение как кнопку в jquery с эффектом нажатия - PullRequest
Новая
       2

использовать изображение как кнопку в jquery с эффектом нажатия

1 голос
/ 13 июня 2011

Я знаю синтаксис для кнопки 

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

Но я хочу использовать изображение.Я применил 

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

. Это хорошо работает, но нажатие на изображение не дает эффекта нажатия.Как добавить эффект нажатия на изображение.

Ответы [ 4 ]

3 голосов
/ 14 июня 2011 
<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>
2 голосов
/ 13 июня 2011

Вот то, что вы хотите получить эффект кнопки на изображении или тексте. Пожалуйста, загрузите изображения по ссылке ниже или создайте свою собственную.

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 */
}
0 голосов
/ 16 мая 2017

Ниже приведен еще один простой способ добавить эффект щелчка, используя события mousedown и mouseup.При изменении поля я наблюдал другие элементы управления в окне смещения.Ниже приведено простое решение для получения эффекта клика с использованием границы. 

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

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

}).mouseup(function () {

    $(this).css("border", "none");
});
0 голосов
/ 13 июня 2011

в теге script напишите код удара для div изображения и поместите тег image внутри div, как это сделано здесь

$ (document) .ready (function () {

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

});

}); 

   <!--<div id="clickimage"><img src="wc.png" width="100" height="100"></div>-->
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...