By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,718 Members | 1,220 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,718 IT Pros & Developers. It's quick & easy.

How to change images on click event?

P: 5
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.  

Share this Question
Share on Google+
6 Replies


dgreenhouse
Expert 100+
P: 250
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

P: 5
i can get only the default img the other two does not show up
Feb 28 '11 #3

dgreenhouse
Expert 100+
P: 250
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

P: 5
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
Expert 100+
P: 250
I'd have to imagine that something is wrong in your code - it works fine for me.
Mar 1 '11 #6

P: 5
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.