1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Using AJAX to change content of a div repeatedly with single link.

Discussion in 'JavaScript' started by JSellnau_TSCC, Dec 20, 2011.

0
  1. #1
    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):
     
    JSellnau_TSCC, Dec 20, 2011 IP
  2. MarPlo

    MarPlo Member

    Messages:
    97
    Likes Received:
    2
    Best Answers:
    2
    Trophy Points:
    48
    #2
    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):
     
    Last edited: Dec 24, 2011
    MarPlo, Dec 24, 2011 IP