Share on Google+Share on Google+

jQuery image replacement by click or select

Advertisement
In this section, you will learn to replace image by button click or select drop down without refreshing complete page.

jQuery image replacement by click or select

In this section, you will learn to replace image by button click or select drop down without refreshing complete page.

EXAMPLE

In the given below code, you will learn to replace image by button click or by selecting an option of select drop down box without refreshing or reloading complete page. This will be done using jQuery. You need only jQuery set up file. In the below example, we are using jQuery setup file  jquery-1.4.2.min.js. The complete HTML code is given below :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Image replacement by click </TITLE>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<style type="text/css">
.style1 {
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
//First Image Change
$("#a").click(function() {
$("#img").attr("src","map.gif");
return false;
});
//Second Image Change
$("#b").click(function() {
$("#img").attr("src","HibernateManytoMany.gif");
return false;
});
//Change to default
$("#c").click(function() {
$("#img").attr("src","OneToMany.gif");
return false;
});
//Image change on select button
$("select").change(function () {
$("select option:selected").each(function () {
$("#img").attr("src",$(this).val()+".gif");
});
})
});
</script>

</HEAD>
<BODY>

<h1 class="style1">Image Replacement By&nbsp; Button Click</h1>
<div>
<p class="style1"><img id="img" alt="" src="OneToMany.gif" width="365" height="266" /></p>
</div>
<center><h3>Click below button to change Image</h3></center>
<div>
<form method="post">
<div class="style1">
<input name="Submit1" id="a" type="submit" 
value="&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Change to Self Join&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"/>
</div>
</form>
</div>
<div>
<form method="post">
<div class="style1">
<input name="Submit2" id="b" type="submit" value="Change to Many to Many"/>
</div>
</form>
</div>
<div>
<form method="post">
<div class="style1">
<input name="Submit2" id="c" type="submit" value="&nbsp;&nbsp;One to Many ( Default )&nbsp;&nbsp;"/>
</div>
</form>
</div>
<center>
<select class="target">
<option value="" selected="selected">Select Join Types</option>
<option value="map">Change to Self Join</option>
<option value="HibernateManytoMany">Change to Many to Many</option>
<option value="OneToMany">One to Many ( Default )</option>
</select>
</center>
</BODY>
</HTML>

OUTPUT

When you click on any button or select the option from the select dropdown, the image will be change dynamically :

 

Download Source Code

Advertisements

Posted on: July 9, 2012 If you enjoyed this post then why not add us on Google+? Add us to your Circles

Share this Tutorial Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.