I know syntax for button
$("#divId").button();
But I want to use image. I have applied
$("img").click(function(){......});
It work well but clicking image do not give clicking effect. How to add clicking effect on image.
-
1What is clicking effect? Also, are you using jQuery UI? If so, please tag it correctly.alex– alex2011-06-13 08:21:51 +00:00Commented Jun 13, 2011 at 8:21
-
clicking effect = pressing effect. when I click image, image should go down and come back.Narendra Sisodiya– Narendra Sisodiya2011-06-13 10:10:48 +00:00Commented Jun 13, 2011 at 10:10
Add a comment
|
4 Answers
<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>
Comments
Here is what you want to get the button effect on image or text. Please download the images from the link below or create your own.
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 */
}
Comments
in script tag write blow code for image div and place image tag inside the div like its done here
$(document).ready(function() {
$("#clickimage").click(function(){
alert("image is clicked");
});
});
<!--<div id="clickimage"><img src="wc.png" width="100" height="100"></div>-->
3 Comments
Narendra Sisodiya
.click do not add click effect
Abdul
what do you really mean for click effect....? above code is working fine when you click on the image it triggers the alert. make me clear about your question.
Narendra Sisodiya
upon clicking image should go down and come up... You know button press effect
Below is another simple way to add click effect using mousedown and mouseup events. When margin is modified I observed other controls in the window displace. I have given below a simple solution to get click effect using border.
$(".imgclick").mousedown(function () {
$(this).css("border", "1px solid #ECECEC");
}).mouseup(function () {
$(this).css("border", "none");
});
