SWAP images using JQuery just by using the src attribute img

Sat Jan 19, 2013 11:18 pm

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>

SWAP images using JQuery just by using the src attribute img

SWAP images using JQuery just by using the src attribute img

Topic Tags