Posted By

vijayrajesh on 01/17/13


Tagged

image jquery img src swap attr


Versions (?)

jQuery Image Source Swap with attr() function


 / Published in: jQuery
 

URL: http://blog.pixelthemes.com/ideas/jquery-image-source-swap-with-attr-function

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.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>jQuery Image Source Swap with attr function</title>
  6. <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  7. </head>
  8. <style>
  9. body
  10. {
  11. margin : 0;
  12. padding : 0;
  13. background : #EEE;
  14. color : #333;
  15. font-family: 'Open Sans', sans-serif;
  16. font-size : 12px;
  17.  
  18. }
  19. #wrapper
  20. {
  21. width : 1012px;
  22. margin : 0 auto;
  23.  
  24. }
  25.  
  26. .the-player
  27. {
  28. width : 560px;
  29. height : 315px;
  30. border : 1px solid #333;
  31. }
  32.  
  33. .embed-code
  34. {
  35. width : 301px;
  36. height : 85px;
  37. }
  38.  
  39.  
  40. .btn-img-swap
  41. {
  42. border: 1px solid #AAA;
  43. padding: 3px 5px;
  44. text-decoration: none;
  45. background: #333;
  46. color: #FFF;
  47. }
  48.  
  49. .img1,.img2
  50. {
  51. width:200px;
  52. margin-right:20px;
  53. }
  54.  
  55. </style>
  56. <body>
  57. <div id="wrapper">
  58.  
  59. <h1>jQuery Image Source Swap with attr function</h1>
  60.  
  61. <img src="http://blog.pixelthemes.com/demo/jquery-image-swap/american-flag.jpg" class="img1" />
  62.  
  63. <img src="http://blog.pixelthemes.com/demo/jquery-image-swap/colors-of-england.jpg" class="img2" />
  64.  
  65. <div style="clear:both;"></div>
  66.  
  67. <p><a href="#" class="btn-img-swap">Swap Images</a></p>
  68.  
  69. <p>Demo by : <a href="http://blog.pixelthemes.com/">WordPress Themes</a> </br>
  70. Article Link : <a href="http://blog.pixelthemes.com/ideas/dynamically-load-youtube-video-iframe-embed-code-inside-a-div">Article on jQuery Image Source Swap with attr function</a>
  71. </div>
  72.  
  73. <script type="text/javascript">
  74. $(document).ready(function() {
  75. $('.btn-img-swap').click(function() {
  76. event.preventDefault();
  77. var img_temp = $(".img1").attr("src");
  78. $('.img1').attr("src",$('.img2').attr("src"));
  79. $('.img2').attr("src",img_temp);
  80. });
  81. });
  82. </script>
  83. </body>
  84. </html>

Report this snippet  

You need to login to post a comment.