Reload specific div

Question

I want to display a sequence of images on a webpage.

The website is static with no server side language.

Is there a way to have the website load kind of like this img1, img2, img3 and so on after a click while not reloading the entire page.

I am pretty new to html and css but willing to do some reading about JavaScript if necessary.

The point is to have the site load as little as possible.So any other tips would be greatly appreciated.

Bonus if there are any other website optimizations I am not thinking of.

You'll need JavaScript to do this. Something like this: http://jsfiddle.net/yMzX9/133/ (adapted from: http://jsfiddle.net/GloverDonovan/yMzX9/). You might also benefit from looking up jQuery click() and toggle() events. — Alex P. Miller, Sep 03 '14 at 22:02
Hmmmm I am not sure I was down voted I definitely researched my question but was unable to find an answer that didn't involve the use of PHP. Anyway Alex I noticed your answer was a way to make the image visible or not visible. What I am looking for is a way to load that div with another image while no longer displaying the first image. Kind of like img1... click... img2... click.... img3 — Techmatt00, Sep 03 '14 at 22:07
This question could be answered with a little more "research". Try reading through the top results on this search: https://www.google.com/search?q=show+image+after+click&oq=show+image+after+click&aqs=chrome..69i57j0l3.5033j0j7&sourceid=chrome&es_sm=122&ie=UTF-8#q=html+show+image+after+click — Alex P. Miller, Sep 03 '14 at 22:10
No in each of the two examples I was shown it simply displayed images which were not initially visible. My question states that I am looking for something different I am looking to repopulate the space that the first image occupied with another image. To give a better example if you have ever viewed an image gallery than you understand that it does not simply make a non visible image visible rather it loads another image in the place of the first. — Techmatt00, Sep 03 '14 at 22:16

score 0 · Answer 1 · answered Sep 03 '14 at 22:07

You can create image tags in your HTML with an empty src attribute:

<img src="" id="image-1">
<img src="" id="image-2">
<img src="" id="image-3">
<a href="#" id="but-1">Load image 1</a>
<a href="#" id="but-2">Load image 2</a>
<a href="#" id="but-3">Load image 3</a>

Then, via JavaScript, you can listen for a click event on each link, and populate the src of each image:

document.getElementById('but-1').on("click", function(){
    document.getElementById("image-1").src="path/to/image.jpg";
})
document.getElementById('but-2').on("click", function(){
    document.getElementById("image-2").src="path/to/second-image.jpg";
})
//... and so on

That way, each time a link is clicked, each respective image will load.

score 0 · Accepted Answer · answered Sep 03 '14 at 22:40

Although you have an accepted answer but here's what you were looking for exactly REPLACING THE DIV ON CLICK

HTML

<input type="button" id="btn1" value="ClickMe">
<div id="dv1">
    <img id="img1" src="">
</div>

jQuery

$( document ).ready(function() {
    var check=0;
    $('#btn1').click(function() {
  var clicks = $(this).data('clicks');
  if (clicks) {
      $("#img1").attr('src', 'url1');
   check++; 
  } else {
      if(check==0){
    $("#img1").attr('src', 'url2');
      }else{ $("#img1").attr('src', 'url3');}
  }
  $(this).data("clicks", !clicks);
});
});

Working DEMO

Thank You! I was getting a bit frustrated I really appreciate the answer! — Techmatt00, Sep 03 '14 at 23:27

Reload specific div

2 Answers2