Total members 11893 |It is currently Mon Nov 04, 2024 11:26 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





SWAP images using JQuery just by using the src attribute of the image element
javascript code
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SWAP images with attributes</title>
<!--
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a#swapIT').click(function() {

var img_temp = $(".img1").attr("src");
$('.img1').attr("src",$('.img2').attr("src"));
$('.img2').attr("src",img_temp);
});
});
</script>
</head>
<style>
body
{
background : #CCC;
color : #3f3;
font-size : 12px;

}




a#swapIT
{
border: 1px solid #AAA;
padding: 3px 5px;
text-decoration: none;
background: #333;
color: #FFF;
}


</style>
<body>
<center>
<div >

<h1>SWAP images using JQuery</h1>

<img src="1.jpg" class="img1" width="300px" />

<img src="2.jpg" class="img2" width="300px" />

<div style="clear:both;"></div>

<p><a href="#" class="btn-img-swap" id="swapIT">Swap Images</a></p>



</div>

</center>
</body>
</html>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : SWAP images using JQuery just by using the src attribute img
 Sequence of Images , draw several images in a row     -  
 Swap Using Pointers     -  
 list swap in C++     -  
 swap two numbers c++ program     -  
 usage of rev attribute     -  
 Usage of the after CSS attribute     -  
 usage of ch attribute     -  
 Usage of the before CSS attribute     -  
 row-span attribute usage     -  
 colspan attribute usage     -  



Topic Tags

JQuery Image
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com