469,276 Members | 1,943 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,276 developers. It's quick & easy.

How to change images on click event?

Hello Every one,
i have three small images while clicking on each one the image of background should be changed. I have used javascript Dom along div, for the first two images it works but i don't know how to get right the third one.
Could anyone help?

Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.     #div1 {
  3.     width:100px;
  4.     height:100px;
  5.     background-image:url(../photo/cake.jpg);
  6.     }
  7. </style>
  8.  
  9. <script language="javascript" type="text/javascript">
  10. function changeDivImage(){
  11.         var imgPath = new String();
  12.         imgPath = document.getElementById("div1").style.backgroundImage;
  13.         if(imgPath == "url(../photo/cake.jpg)" || imgPath == ""){
  14.             document.getElementById("div1").style.backgroundImage = "url(../photo/cake.jpg)";
  15.             }else{    
  16.             document.getElementById("div1").style.backgroundImage = "url(../photo/cake1.jpg)";
  17.  
  18.         }
  19. }
  20.     </script>
  21. </head>
  22.  
  23. <body>
  24.     <div id="div1">
  25.     </div>
  26. <input type="button" value="Change Image" onClick="changeDivImage()" />
Feb 27 '11 #1

✓ answered by dgreenhouse

Oops!

Sorry about that...

Remove the semicolons ";" after each image class definition.
i.e.

Expand|Select|Wrap|Line Numbers
  1.   .image1 {background-image:url(../photo/cake1.jpg)};
  2.   .image2 {background-image:url(../photo/cake2.jpg)};
  3.   .image3 {background-image:url(../photo/cake3.jpg)};
  4.  
  5. // should be...
  6.  
  7.   .image1 {background-image:url(../photo/cake1.jpg);}
  8.   .image2 {background-image:url(../photo/cake2.jpg);}
  9.   .image3 {background-image:url(../photo/cake3.jpg);}
  10.  
  11. // Good practice dictates including the semicolons after each selector as in:
  12. // .image3 {background-image:url(../photo/cake3.jpg);}
  13.  
  14.  

6 4072
dgreenhouse
250 Expert 100+
An easier way would be to change the class name of the div and to have css existent that applies the background.

I think I've got this correct...

i.e.
Expand|Select|Wrap|Line Numbers
  1. <style type="text/css">
  2.     #div1 {
  3.     width:100px;
  4.     height:100px;
  5.     }
  6.   .image1 {background-image:url(../photo/cake1.jpg)};
  7.   .image2 {background-image:url(../photo/cake2.jpg)};
  8.   .image3 {background-image:url(../photo/cake3.jpg)};
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12.   function changeDivImage(){
  13.     var elm = document.getElementById("div1");
  14.     var new_class_name = "";
  15.  
  16.     switch (elm.className) {
  17.       case "image1":
  18.         new_class_name = "image2";
  19.         break;
  20.       case "image2":  
  21.         new_class_name = "image3";
  22.         break;
  23.       default:
  24.         new_class_name = "image1";   
  25.     }
  26.  
  27.     elm.className = new_class_name;
  28.   }
  29. </script>
  30. </head>
  31.  
  32. <body>
  33.     <div id="div1" class="image1">
  34.     </div>
  35. <input type="button" value="Change Image" onClick="changeDivImage()" />
  36.  
Feb 28 '11 #2
i can get only the default img the other two does not show up
Feb 28 '11 #3
dgreenhouse
250 Expert 100+
Oops!

Sorry about that...

Remove the semicolons ";" after each image class definition.
i.e.

Expand|Select|Wrap|Line Numbers
  1.   .image1 {background-image:url(../photo/cake1.jpg)};
  2.   .image2 {background-image:url(../photo/cake2.jpg)};
  3.   .image3 {background-image:url(../photo/cake3.jpg)};
  4.  
  5. // should be...
  6.  
  7.   .image1 {background-image:url(../photo/cake1.jpg);}
  8.   .image2 {background-image:url(../photo/cake2.jpg);}
  9.   .image3 {background-image:url(../photo/cake3.jpg);}
  10.  
  11. // Good practice dictates including the semicolons after each selector as in:
  12. // .image3 {background-image:url(../photo/cake3.jpg);}
  13.  
  14.  
Feb 28 '11 #4
that is gr8,but if i click on first img several times then it goes on and on till last img,it should show only one img by one click and then stop.
i have all tags closed still the same problem

thanks for help
Mar 1 '11 #5
dgreenhouse
250 Expert 100+
I'd have to imagine that something is wrong in your code - it works fine for me.
Mar 1 '11 #6
that is a headache, i did copy all code and see nothing wrong.

i will go through once again
Mar 1 '11 #7

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

5 posts views Thread by J McD | last post: by
11 posts views Thread by Sarah | last post: by
2 posts views Thread by Kjell Kristiansson | last post: by
3 posts views Thread by Robert W. | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.