In a html design, Normally when complete input data will press a submit button to request the data.
This post will show you how to use a image button to submit form? The image that have a movseover hover effect.
First you need to download the jquery library to your test location or use below code direct reference the library.
<script src="http://code.jquery.com/jquery-latest.js"></script>
we need to add the jQuery library script between the <head> tags.
we also need two images.I use the two below.I named them button_normal.png and button_hover.png
I writed two css use to define the image style, The class name are "imageNormal" and "imageHover".
.imageNormal{
cursor:pointer;
border-style: inset;
}
.imageHover{
cursor:pointer;
border-style: outset;
}
There are 5 parameters in css style.
when the page loading, we need to initial the action use jquery.
$("#imgButton").hover(function() {
$(this).attr("class","imageHover");
$(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHfSrt9UJLm29Id7C2RUpdioxkhaqnncIZDFp4kD-DTSD0aIOWdWobYVciSDi-jTmH6JNJJVEuS3E1_m0ieMvWkVWsY3aYRLY3_opoGj3pDT4i9fzG2tZr9rpSEUxofJm9xlqb6cbocT/s1600/button_hover.png");
}, function() {
$(this).attr("class","imageNormal");
$(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7McHsOjSD9bjHoFnGw5-A8o3TO58S8QY9XllX17migQShHjYLc_Xyyv3-K7Wk0d71EvzDjwn2kll_iocoFFgwkANpDDRzWf9TSOeCbgl6fe6imj1mcCFUbyoWBDDTQO_LkZ56T8VF4q2g/s1600/button_normal.png");
});
upon code define the img will change the css style when mouse hover it.
$("#imgButton").click(function(){
$("#myForm").submit();
});
upon code will call the submit action when click the image button.
$("#myForm").submit(function(){
alert("submit");
return false;//delete this line when your have sever side to request
});
upon code will submit the form.
Between the body tag in html we write below code.
<form id="myForm" method="post" action=""> <img id="imgButton" alt="My button" class="imageNormal" /> </form>
DEMO
Below is the source code:
<html>
<body>
<div class="demo">
<h2>DEMO</h2>
<style>
.imageNormal{
cursor:pointer;
border-style: inset;
}
.imageHover{
cursor:pointer;
border-style: outset;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#imgButton").hover(function() {
$(this).attr("class","imageHover");
$(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxWHfSrt9UJLm29Id7C2RUpdioxkhaqnncIZDFp4kD-DTSD0aIOWdWobYVciSDi-jTmH6JNJJVEuS3E1_m0ieMvWkVWsY3aYRLY3_opoGj3pDT4i9fzG2tZr9rpSEUxofJm9xlqb6cbocT/s1600/button_hover.png");
}, function() {
$(this).attr("class","imageNormal");
$(this).attr("src","https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7McHsOjSD9bjHoFnGw5-A8o3TO58S8QY9XllX17migQShHjYLc_Xyyv3-K7Wk0d71EvzDjwn2kll_iocoFFgwkANpDDRzWf9TSOeCbgl6fe6imj1mcCFUbyoWBDDTQO_LkZ56T8VF4q2g/s1600/button_normal.png");
});
$("#imgButton").click(function(){
$("#myForm").submit();
});
$("#myForm").submit(function(){
alert("submit");
return false;//delete this line when your have sever side to request
});
});
</script>
<form id="myForm" method="post" action="">
<img id="imgButton" alt="My button" class="imageNormal" />
</form>
</div>
</body>
</html>
Related Articles
jquery disable button
Thank you because you have been willing to share information with us. we will always appreciate all you have done here because I know you are very concerned with our. images data entry
ReplyDelete