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.