html點選小圖檢視大圖
阿新 • • 發佈：2019-01-31
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title> 點選小圖切換大圖 </title> <style> .small_img,.big_img { cursor: pointer; } .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=80); } .big_img { display: none; position: absolute; width: 120px; height: 120px; left: 50%; top: 50%; margin: -60px 0px 0px -60px; z-index:1002; overflow: auto; } </style> </head> <body> <img class="small_img" src ="img/icon_title_bar.png" onclick="document.getElementById('light').style.display ='block';document.getElementById('fade').style.display='block'"/> <img id="light" class="big_img" src ="img/icon_title_bar.png" onclick = "document.getElementById('light').style.display ='none' ;document.getElementById('fade').style.display='none'"/> <div id="fade" class="black_overlay"></div> </body> </html>