Posted on: July 9, 2012 at 12:00 AM
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 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=" Change to Self Join "/>
</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=" One to Many ( Default ) "/>
</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 :
If you are facing any programming issue, such as compilation errors or not able to find the code you are looking for.
Ask your questions, our development team will try to give answers to your questions.
