Home Tutorial Jquery jQuery image replacement by click or select

 
 

Share on Google+Share on Google+
jQuery image replacement by click or select
Posted on: July 9, 2012 at 12:00 AM
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

Advertisement

Related Tags for jQuery image replacement by click or select:


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.

Posted on: July 9, 2012

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com