Randomly show / hide images in html by using javascript

Question

i have this div containing two images.

<div class="pc" id="pc1">
  <img src="available.png" alt="Available">
  <img src="unavailable.png" alt="UnAvailable">
</div>

when page will load, one image will show and the other will hide. when click on the image which is shown then the showing image will hide and hidden image will show... same process for the other image click event. images must be overlap just because i dont want any extra space. same space for both images simultaneously.... how to code for this....

You should start making your hands dirty :) Take some inspiration from [this](https://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) and similar questions. — trincot, Mar 16 '19 at 15:15
i tried nothing.... because since 2005... i didnt do anything on javascript... i forgot js.. i want to use image as a link... — info catalyst, Mar 16 '19 at 15:16

bill.gates · Answer 1 · 2019-03-16T16:37:17.213

0

try this:

first of all include jquery in your head tag:

<head> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head>

ok now set an class to the first img and a class to the other img and set for the second image the style to display none

<div class="pc" id="pc1">

<img class="img1" src="available.png" alt="Available">
<img class="img2" src="unavailable.png" alt="UnAvailable" 
style="display:none">

</div>

now you need to add an script for that:

<script>
$( ".img1" ).click(function() {
$( ".img1" ).hide();
$( ".img2" ).show();
 });
  $( ".img2" ).click(function() {
$( ".img2" ).hide();
 $( ".img1" ).show();
 });
 </script>

edited Mar 16 '19 at 16:37

answered Mar 16 '19 at 15:27

bill.gates

14,145
3
19
47

when page loads both images shown... i want only one image to show after page load... – info catalyst Mar 16 '19 at 15:52
i say you need to put in your second img an style of display: none – bill.gates Mar 16 '19 at 15:53

Sergio Belevskij · Answer 2 · 2019-03-16T19:46:38.103

<style>
  .pc {
    position: relative;
  }
  .visible, .unvisible {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  .unvisible {
    display: none;
  }
</style>

<script>
  // add event listener to wait when page is load
  document.addEventListener("DOMContentLoaded", () => { 
    // get instances of both images
    const img1 = document.getElementById("img1")
    const img2 = document.getElementById("img2")
    /**
     * this method toggle visibility of image
    */
    const toggleImage = (image) => {
      image.classList.toggle("unvisible")
    }
    // hide visible image #1
    toggleImage(img1)
    // show unvisible image #2
    toggleImage(img2)
    // Add event listener for user press a mouse key on image #2
    img2.addEventListener("mousedown, mouseup", () => {
      // hide visible image #1
      toggleImage(img1)
      // show hidden image #2
      toggleImage(img2)
    })
  });
</script>

<div class="pc" id="pc1">
  <img id="img1" src="available.png" alt="Available">
  <img id="img2" class="unvisible" src="unavailable.png" alt="UnAvailable">
</div>

so, you can use DOM model to toggle class "unvisible" and hide one image and show other.

Quentin Veron · Answer 3 · 2019-03-16T16:01:00.250

Since both your images are children of the same element, you could set an event listener on the parent instead.

const toggleImages = () => {
  // get the parent wrapper element
  const pc1 = document.getElementById('pc1');
  
  // if #pc1 exists
  if (pc1) {
  
    // attach an event click
    pc1.addEventListener('click', () => {
     pc1.classList.toggle('is-active'); // toggle `is-active` class
    });
  }
};

toggleImages();

#pc1 {
  display: inline-block;
}

/* Hide last image by default */
#pc1:not(.is-active) img:last-child { 
  display: none; 
}

#pc1.is-active img:first-child {
  display: none;
}

<div class="pc" id="pc1">
  <img src="https://via.placeholder.com/175/000000?text=First+Image" alt="Available">
  <img src="https://via.placeholder.com/175/33414D?text=Second+Image" alt="UnAvailable">
</div>

Randomly show / hide images in html by using javascript

3 Answers3