I just can't seem to find something on google that will do what I need it to do. Create a AJAX script that does the following: 1. Display 3 100x100px images and a button. 2. When the button is clicked, the 3 images are replaced with 1 new image. 3. When the button is clicked again, the image is replaced with a professional square box designed with CSS (background color #DFF2BF and 1px border color #4F8A10). This is what I am starting with: <html> <head> </head> <body> <div id="content"> <img src="http://www.google.com/events/io/2011/static/img/Google.png" height="100" width="100" /> <img src="http://www.google.com/events/io/2011/static/img/Google.png" height="100" width="100" /> <img src="http://www.google.com/events/io/2011/static/img/Google.png" height="100" width="100" /> </div> <button type="button">Next</button> </form> </body> </html> AJAX Sample Content (step 2): <img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" height="175" width="95" /> AJAX Sample Content (step 3): <div>(replace me with your CSS box here)</div> Code (markup):
Hi, Try understand and use the following code, and give thanks to God <html> <head> </head> <body> <div id="content"> <img src="http://www.google.com/events/io/2011/static/img/Google.png" height="100" width="100" /> <img src="http://www.google.com/events/io/2011/static/img/Google.png" height="100" width="100" /> <img src="http://www.google.com/events/io/2011/static/img/Google.png" height="100" width="100" /> </div> <button type="button" id="btn">Next</button> </form> <script type="text/javascript"> // www.coursesweb.net/javascript var clc = 0; function changeImg() { if(clc == 0) { document.getElementById('content').innerHTML = '<img src="http://www.google.com/intl/en_com/images/srpr/logo3w.png" height="175" width="95" />'; clc++; } else document.getElementById('content').innerHTML = '<div style="background:#dff2bf;border:1px solid #4f8b10;width:200px;height:150px;"></div>'; } document.getElementById('btn').onclick = changeImg; </script> </body> </html> Code (markup):