Modifier Le code:
Voir Résultat »
Essayez-le vous-même - ©
w3ii.com
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/lib/w3.css"> <style> .picture {display:none} </style> <body> <div class="w3-container"> <h2>Tabbed Image Gallery</h2> <p>Click on the images below:</p> </div> <div class="w3-row"> <div class="w3-col s3 w3-container"> <a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Nature');"> <img src="img_nature.jpg" alt="Nature" style="width:100%"> </a> </div> <div class="w3-col s3 w3-container"> <a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Fjords');"> <img src="img_fjords.jpg" alt="Fjords" style="width:100%"> </a> </div> <div class="w3-col s3 w3-container"> <a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Mountains');"> <img src="img_mountains.jpg" alt="Mountains" style="width:100%"> </a> </div> <div class="w3-col s3 w3-container"> <a href="javascript:void(0)" class="w3-hover-opacity" onclick="openImg('Lights');"> <img src="img_lights.jpg" alt="Lights" style="width:100%"> </a> </div> </div><br> <div id="Nature" class="picture w3-display-container"> <img src="img_nature_wide.jpg" alt="Nature" style="width:100%"> <span onclick="this.parentElement.style.display='none'" class="w3-display-topright w3-closebtn w3-padding-large w3-text-white">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Nature</div> </div> <div id="Fjords" class="picture w3-display-container"> <img src="img_fjords_wide.jpg" alt="Fjords" style="width:100%"> <span onclick="this.parentElement.style.display='none'" class="w3-display-topright w3-closebtn w3-padding-large w3-text-white">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Fjords</div> </div> <div id="Mountains" class="picture w3-display-container"> <img src="img_mountains_wide.jpg" alt="Mountains" style="width:100%"> <span onclick="this.parentElement.style.display='none'" class="w3-display-topright w3-closebtn w3-padding-large w3-text-white">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Mountains</div> </div> <div id="Lights" class="picture w3-display-container"> <img src="img_lights_wide.jpg" alt="Lights" style="width:100%"> <span onclick="this.parentElement.style.display='none'" class="w3-display-topright w3-closebtn w3-padding-large w3-text-white">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Northern Lights</div> </div> <script> function openImg(imgName) { var i, x; x = document.getElementsByClassName("picture"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } document.getElementById(imgName).style.display = "block"; } </script> </body> </html>