【HTML &CSS】实现在一个网页内实现浏览图片

要求就是在点击某个链接是,留在这个网页而不跳转另一个窗口同时显示那张图片原有的清单。
方法:通过增加一个占位符图片的方法在这个主页上为图片预留一个区域,点击链接时拦截这个网页的默认的行为。当点击链接时把占位符图片替换那个谅解相对的图片

<!DOCTYPE html>
<html lang="en">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Image</title>
 </head>
 <body>
 <h1>Snapshots</h1>
 <ul> 
    <li><a href="images/1.jpg" onclick="showPic(this);return false;" title="Afire">1</a></li>
    <li><a href="images/2.jpg" onclick="showPic(this);return false;" title="A1">2</a></li>
    <li><a href="images/3.jpg" onclick="showPic(this);return false;" title="A2">3</a></li>
    <a href="http://www.baidu.com" onclick="return false;">Click me</a>
 </ul>
 <img id="photo" src="images/photo.jpg" alt="my image gallery"/><!--占位符-->
 <script type="text/javascript"> function showPic(whichpic){ var source=whichpic.getAttribute("href"); var placeholder=document.getElementById("photo");//获取占位符 photo.setAttribute("src",source); return false; } </script>
 </body>
</html>

你可能感兴趣的:(【HTML &CSS】实现在一个网页内实现浏览图片)