JavaScript第四章：标记

1.介绍

这一章，我们将尝试用JavaScript和DOM建立一个图片库。把整个图片库的浏览器链接集中安排在图片库主页里，只有用户点击了该主页的某个图片的链接才把相应的图片传给他。

2.标记

第一项工作：为这些图片创建一个链接清单。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Image Gallery</title>
</head>
<body>
  <h1>SnapChats</h1>
  <ul>
    <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_1.jpg" title="JavaScript第三章图片1">Picture 1</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_2.jpg" title="JavaScript第三章图片2">Picture 2</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_3.jpg" title="JavaScript第三章图片3">Picture 3</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_4.jpg" title="JavaScript第三章图片1">Picture 4</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_5.jpg" title="JavaScript第三章图片1">Picture 5</a>
    </li>
    
     <li>
      <a href="file:///E|/JavaScript第四章/images/JavaScript3_6.jpg" title="JavaScript第三章图片1">Picture 6</a>
    </li>
   </ul>
</body>
</html>

希望改进的几个地方及改进方法：

当点击某个链接，希望能留在这个网页。

解决方法：在点击某个链接，拦截这个网页的行为

当点击某个链接，希望能在这个网页同时看到那张图片和原有的图片清单

解决方法：通过增加“占位符”图片在主页为图片预留一个浏览区域，点击某个图片链接时，把“占位符”图片替换为那个链接相对应的图片。

<!--解决占位符图片的问题-->
<!--把下面这些代码插入到图片清单的末尾-->

<img id="placeholder" src="file:///E|/JavaScript第四章/images/01.jpg" alt="my image gallery"/>

JavaScript第四章：标记

1.介绍

2.标记

猜你喜欢