Return to Snippet

Revision: 61836
at January 17, 2013 22:25 by vijayrajesh

Initial Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="" lang="en-US">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Image Source Swap with attr function</title>
<link href=',300,600,700' rel='stylesheet' type='text/css'><script  type="text/javascript" src=""></script>
		margin	: 0;
		padding	: 0;
		background	: #EEE;
		color		: #333;
		font-family: 'Open Sans', sans-serif;
		font-size	: 12px;
		width	: 1012px;
		margin	: 0 auto;
		width	: 560px;
		height	: 315px;
		border	: 1px solid #333;
		width	: 301px;
		height	: 85px;
		border: 1px solid #AAA;
		padding: 3px 5px;
		text-decoration: none;
		background: #333;
		color: #FFF;
	<div id="wrapper">
		<h1>jQuery Image Source Swap with attr function</h1>
		 <img src="" class="img1" />
		 <img src="" class="img2" />
		 <div style="clear:both;"></div>
		 <p><a href="#" class="btn-img-swap">Swap Images</a></p>
		<p>Demo by : <a href="">WordPress Themes</a> </br>
		Article Link : <a href="">Article on jQuery Image Source Swap with attr function</a>
	<script type="text/javascript">
	$(document).ready(function() {
		$('.btn-img-swap').click(function() {
			 var img_temp = $(".img1").attr("src");

Initial URL

Initial Description
I have made a small jQuery snippet to demo the image swapping with attr() funciton.  The demo uses 2 images with classes img1 and img2 respectively.  On a click of a button, the images are swapped.

Basically the script stores “src” value into a variable and then it is  used to swap 2 image sources.

Initial Title
jQuery Image Source Swap with attr() function

Initial Tags
image, jquery

Initial Language