css Question posted in
Some basic documentation can be found here.

Css – Hide image if another one is opened, vice versa

I’m have code for 2 images (Image1, Image2) that both open if 2 other images are clicked, with onclick and a java part at the end, like so:

<table style="whatever">
    <tbody>
        <tr style="whatever"">

            <td><a href="link to game1 when the image is clicked" alt="Game1" target="blank" onclick="AfficherCacher('Image1')"> <img src="the image clicked to open Game1+Image1.jpg" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a><br></td>
           <td><a href="link to game2 when the image is clicked" alt="Game2" target="blank" onclick="AfficherCacher('Image2')"> <img src="the image clicked to open Game2+Image2.jpg" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a><br></td>
        </tr>
    </tbody>
</table>

then

</table>
   <table style="whatever">
    <tbody>
        <tr style="whatever">
            <td>
                <div id="Image1">
                    <ul>
                        <img src="Image1.jpg">
                    </ul>
                </div>
            </td>
</table>
   <table style="whatever">
    <tbody>
        <tr style="whatever">
            <td>
                <div id="Image2">
                    <ul>
                        <img src="Image2.jpg">
                    </ul>
                </div>
            </td>

And then the JavaScript part at the end making it all work:

<p>
    <script type="text/javascript">
        // <![CDATA[
        function AfficherCacher(texte) {
            var test = document.getElementById(texte).style.display;
            if (test == "block") {
                document.getElementById(texte).style.display = "none";
            } else {
                document.getElementById(texte).style.display = "block";
            }
        }
        // ]]>
    </script>
</p>

The only thing is that both Image1 and Image2 can be displayed on the page at the same time, which i DO NOT want. I would like for opening Image2 to make Image1 disapear, and for opening Image1 to make Image2 disapear.

I do not know what to use for this.

Thank you in advance for your help.

I have tried inventing "if" conditions, but I am not JavaScript (or CSS) litterate, so I’m going in blind and I’m clearly doing something wrong. I don’t know what I’m able to use and what exists/works.

Tags:

2

Answers


  1. 0

    You should make usage of data-attributes here which will make things easier.
    Then you can use the classList.toggle function to apply a class or remove depending on a condition.

    In my code below I compare the data-attribtue value of the clicked button with every image and hide every image that does not have the same data-attribtue value. This would even work when using 100 images.

    const Buttons = document.querySelectorAll('menu button');
const Images = document.querySelectorAll('img');

Buttons.forEach(button => {
  button.addEventListener('click', function() {
    let dataIndex = this.dataset.image;
    Images.forEach(image => {
      let imageIndex = image.dataset.image;
      image.classList.toggle('d-none', imageIndex !== dataIndex);
    })
  })
})
    .d-none {
  display: none;
}
    <menu>
  <li><button data-image="1">Show Red Image</button></li>
  <li><button data-image="2">Show Blue Image</button></li>
</menu>

<img data-image="1" class="d-none" src="https://fakeimg.pl/200/ff0000/FFFFFF">
<img data-image="2" class="d-none" src="https://fakeimg.pl/200/0000ff/FFFFFF">
    Login or Signup to reply.
  2. 0

    You can delegate using data-attributes.

    I see you want to open in a new window, so you need the target="_blank"

    Links to do not have alt like images do. You can however use title.

    Lastly you use table for the images in what I gave the ID of imageTable. I am not sure why you need table, div and ul for image, when you in principle can have just the images

    window.addEventListener('DOMContentLoaded', () => {
  const linkTable = document.getElementById('linkTable');
  const imageDivs = document.querySelectorAll('#imageTable div');
  linkTable.addEventListener('click', (e) => {
    const tgt = e.target.closest('a');
    if (!tgt) return; // not a link
    imageDivs.forEach(div => {
      const id = div.id;
      const tgtId = tgt.dataset.target;
      div.hidden = tgtId !== id;
    })  
  });
});
    <table id="linkTable">
  <tbody>
    <tr>
      <td>
        <a href="link to game1 when the image is clicked" title="Game1" data-target="image1" target="_blank"><img src="https://placehold.co/1689x955?text=Open+Image1" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a>
      </td>
      <td>
        <a href="link to game2 when the image is clicked" title="Game2" data-target="image2" target="_blank"><img src="https://placehold.co/1689x955?text=Open+Image2" width="1689" height="955" class="img-fluid atto_image_button_text-bottom"></a>
      </td>
    </tr>
  </tbody>
</table>
<hr />
<table id="imageTable">
  <tbody>
    <tr>
      <td>
        <div id="image1" hidden>
          <ul>
            <img src="https://placehold.co/1689x955?text=Image1">Image 1
          </ul>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="image2" hidden>
          <ul>
            <img src="https://placehold.co/1689x955?text=Image2">Image 2
          </ul>
        </div>
      </td>
    </tr>
</table>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search