<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image</title>
<style rel="stylesheet" type="text/css">
<!--
body{
background:#666;
margin:0;
padding:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
}
a:link,a:visited,a:active{
text-decoration:none;
color:#fff;
font-size:12px;
}
a:hover{
text-decoration:underline;
color:#0cf;
font-size:12px;
}
.content{
width:400px;
margin:0 auto;
}
ul{
margin:0;
padding:0;
list-style-type:none;
}
li{
margin-bottom:10px;
float:left;
padding-right:20px;
}
-->
</style>
<script language="javascript" type="text/javascript">
function showPic(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
var text = whichpic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
</script>
</head>
<body>
<div class="content">
<h1>One day morning</h1>
<ul>
<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8580/727a3394-9931-3dd5-a91a-3d6939c17f6f.gif" title="One day morning,I first open my eyes and get up." onclick="showPic(this);return false;">1.Get up</a></li>
<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8578/67a50c92-bb8f-35c1-ac42-b3ef20d7905d.gif" title="I come to the toilet to brush my teeth." onclick="showPic(this);return false;">2.Brush teeth</a></li>
<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8576/63f36ddd-424d-3342-9194-5a056b6ca509.gif" title="Then wash my face to become sober." onclick="showPic(this);return false;">3.Wash face</a></li>
<li><a href="http://ice-cream.iteye.com/upload/picture/pic/8574/87f1dd65-fd7e-362f-8861-ee53ef4e0314.gif" title="Next to mirror to comb my hair,and over" onclick="showPic(this);return false;">4.Comb hair</a></li>
</ul>
<img id="placeholder" src="http://ice-cream.iteye.com/upload/picture/pic/8572/bf42aa6e-fec4-31f1-9814-361234b93ca7.gif" alt="a beautiful day's morning" />
<p id="description">Choose an image.</p>
</div>
</body>
</html>
分享到：
相关推荐
JavaScript美术馆是一个旨在帮助学习者深入理解JavaScript编程概念的实践项目。这个小实验通过创意的方式展示了JavaScript在网页交互和动画设计中的应用，使学习过程变得更加有趣和直观。在探索JavaScript美术馆的...
JavaScript美术馆改进版是一个基于JavaScript实现的交互式网页项目，旨在提供一种优雅且高效的方式来展示艺术作品，同时将显示层和行为层分离，提高代码的可维护性和可读性。在这个项目中，JavaScript作为主要的...
在JavaScript美术馆中，WebGL可能被用于创建复杂的3D艺术作品，让用户能够从不同角度探索和互动。 此外，为了提高用户体验，开发者还可能运用到响应式设计，确保美术馆在不同设备和屏幕尺寸上都能正常显示。还有...
JavaScript美术馆是一个精彩的学习资源，它将编程概念与艺术元素相结合，通过实际的图像展示工具来教授JavaScript和DOM操作。这个项目对于那些希望深入理解如何利用JavaScript动态操纵网页内容的初学者来说，是一份...
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...
第4章 案例研究:JavaScript美术馆 4.1 编写标记语言文档 4.2 编写JavaScript函数 4.3 JavaScript函数的调用 4.4 对JavaScript函数进行功能扩展 4.5 小结 第5章 JavaScript编程原则和良好习惯 ...
为了加深对知识的理解，本书安排了多个案例研究，包括如何创建一个简单的JavaScript美术馆，以及如何通过引入新的JavaScript特性来改进美术馆项目。案例研究穿插在各个章节中，使得理论和实践能够相互结合，帮助读者...
- **意义**：通过建立美术馆管理系统，不仅能够提高工作效率，减少错误，还能更好地服务于公众，提升美术馆的整体形象。 ### 二、技术框架及开发环境 #### 2.1 技术栈 - **开发语言**：Java - **框架**：Spring ...
美术馆管理系统是一个典型的数据库应用系统，通常用于管理艺术品信息、展览信息、参观者信息等，为用户提供便捷的数据查询、统计和管理功能。在这个项目中，Java作为后端开发语言，SQL Server作为数据库管理系统，...
在"javascript 学习之旅 （3）"这一章节中，我们深入探讨了JavaScript在实际应用中的案例，特别是通过创建一个"javascript美术馆"来实践所学的知识。在这个案例中，我们将了解到DOM操作的一些关键属性和技巧，这对于...
美术馆预约系统微信小程序是一款基于Java SpringBoot和SSM框架开发的毕业设计项目，旨在提供一个便捷的线上预约参观美术馆的服务。微信小程序作为移动端的应用，它能够无缝接入微信平台，为用户带来无需下载、即开即...