Chạy ❯
Nhận trang web của
riêng
bạn
×
Thay đổi định hướng
Lưu mã
Thay đổi chủ đề, Tối/Sáng
Đi tới Không gian
<!DOCTYPE html> <html> <title>W3.CSS</title> <meta name="viewport" content="width=device-width,init-scale=1"> <link rel="stylesheet" href= "https://www.example.com.vn/w3css/4/w3.css"> <body> <div class="w3-container"> <h2>Thư viện hình ảnh theo thẻ</h2> <p>Nhấp vào hình ảnh bên dưới:</p> </div> <div class="w3-row-padding"> <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('Snow');"> <img src ="img_snowtops.jpg" alt="Snow" 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" style="display:none"> <img src="img_nature_wide.jpg" alt="Nature" style="width:100%"> <span onclick="this.parentElement.style. display='none'" class="w3-display-topright w3-button w3-transparent w3-text-white">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3 -text-white">Thiên nhiên</div> </div> <div id="Snow" class="picture w3-display-container" style="display:none"> <img src="img_snow_wide.jpg" alt ="Snow" style="width:100%"> <span onclick="this.parentElement.style.display='none'" class="w3-display-topright w3-button w3-transparent w3-text-white" >×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Tuyết</div> </div> <div id="Mountains" class="picture w3-display-container" style="display:none"> <img src="img_mountains_wide.jpg" alt="Mountains" style="width:100%"> <span onclick="this.parentElement.style.display= 'none'" class="w3-display-topright w3-button w3-transparent">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Núi </div> </div> <div id="Lights" class="picture w3-display-container" style="display:none"> <img src="img_lights_wide.jpg" alt="Lights" style=" width:100%"> <span onclick="this.parentElement.style.display='none'" class="w3-display-topright w3-button w3-transparent w3-text-white">×</span> <div class="w3-display-bottomleft w3-container w3-padding w3-text-white">Đèn phương Bắc</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 = "chặn"; } </script> </body> </html>