<!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 addLoadEvent(func){
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}
else {
window.onload = function(){
oldonload();
func();
}
}
}
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement){
parent.appendChild(newElement);
}
else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
function preparePlaceholder(){
if(!document.createElement) return false;
if(!document.createTextNode) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var placeholder = document.createElement("img");
placeholder.setAttribute("id","placeholder");
placeholder.setAttribute("src","http://ice-cream.iteye.com/upload/picture/pic/8572/bf42aa6e-fec4-31f1-9814-361234b93ca7.gif");
placeholder.setAttribute("alt","a beautiful day's morning");
var description = document.createElement("p");
description.setAttribute("id","description");
var desctext = document.createTextNode("Choose an image");
description.appendChild(desctext);
var gallery = document.getElementById("imagegallery");
insertAfter(placeholder,gallery);
insertAfter(description,placeholder);
}
function prepareGallery(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementById("imagegallery")) return false;
var gallery = document.getElementById("imagegallery");
var links = gallery.getElementsByTagName("a");
for (var i=0;i<links.length;i++ ){
links[i].onclick = function(){
return showPic(this);
}
links[i].onkeypress = links[i].onclick;
}
}
function showPic(whichpic){
if (!document.getElementById("placeholder")) return true;
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
if (placeholder.nodeName != "IMG") return true;
placeholder.setAttribute("src",source);
if (!document.getElementById("description")) return false;
var text = whichpic.getAttribute("title")?
whichpic.getAttribute("title"):"";
var description = document.getElementById("description");
if (description.firstChild.nodeType == 3){
description.firstChild.nodeValue = text;
}
return false;
}
addLoadEvent(preparePlaceholder);
addLoadEvent(prepareGallery);
</script>
</head>
<body>
<div class="content">
<h1>One day morning</h1>
<ul id="imagegallery">
<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 ="return showPic(this);" onkeypress="return showPic(this);">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 ="return showPic(this);" onkeypress="return showPic(this);">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 ="return showPic(this);" onkeypress="return showPic(this);">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 ="return showPic(this);" onkeypress="return showPic(this);">4.Comb hair</a></li>
</ul>
</div>
</body>
</html>
分享到:
相关推荐
JavaScript美术馆改进版是一个基于JavaScript实现的交互式网页项目,旨在提供一种优雅且高效的方式来展示艺术作品,同时将显示层和行为层分离,提高代码的可维护性和可读性。在这个项目中,JavaScript作为主要的...
JavaScript美术馆是一个旨在帮助学习者深入理解JavaScript编程概念的实践项目。这个小实验通过创意的方式展示了JavaScript在网页交互和动画设计中的应用,使学习过程变得更加有趣和直观。在探索JavaScript美术馆的...
这份“JavaScript参考手册中文版chm版”是为开发者提供的一份详细资源,帮助他们深入理解和应用JavaScript。 CHM(Compiled HTML Help)是微软推出的一种帮助文档格式,将HTML文件编译成一个单一的可执行文件,便于...
《JavaScript犀牛书》第六版中还涵盖了这些内容的详细讲解,并且提供了源码和书签,方便读者实践和查阅。通过系统阅读和反复实践,你可以逐步精通JavaScript,为成为优秀的前端开发者或全栈工程师奠定坚实基础。
JavaScript Code Improver中文版JavaScript Code Improver中文版JavaScript Code Improver中文版JavaScript Code Improver中文版
《JavaScript入门经典(第3版)》首先介绍了JavaScript的基本语法,并介绍了如何发挥JavaScript中对象的威力。《JavaScript入门经典(第3版)》还介绍了如何操纵最新版本浏览器所提供的BOM对象。在《JavaScript入门经典...
在19MB的7z压缩文件中包含的《JavaScript权威指南》PDF版,提供了方便的电子阅读体验。PDF文件格式可以确保文本和排版的保真度,使得读者在电脑、平板或手机上都能轻松阅读。 这本书的知识点广泛且深入,主要包括...
Javascript学习是Android客户端目前最全面的免费离线Javascript学习书籍,从Html入门到Html样式设计,再到Javascript,提高网页设计能力。主要内容包括: 1、Html基本标签 2、Html表单知识 3、Web2.0(Div+Css样式)...
JavaScript程序员构建JavaScript应用程序时不可获缺的参考书,涉及到JavaScript在Web2.0中的应用
资源名称:Javascript权威指南(第五版)内容简介:《Javascript权威指南第4版》中文版出版至今已有三年多的时间。这本《JaVascript权威指南》连续印刷5次,销售数十万册,成为很多Javascript...
《JavaScript宝典(第四版)》.《JavaScript宝典(第四版)》.
《JavaScript权威指南(第6版)》主要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScript API。本书第6版涵盖了HTML5和ECMAScript 5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增...
JavaScript 编程精解 中文第三版 JavaScript 编程精解 中文第三版
JavaScript核心技术 简介: 《JavaScript核心技术》对于各种浏览器、浏览器版本、JavaScript版本、DOM版本的介绍,有助于我们理解所遇到的各种新旧代码,使我们能够对这些代码做出正确的取舍。《JavaScript核心技术》...
javascript权威指南第5版(中文)高清版
《O'Reilly精品图书系列:JavaScript权威指南(第6版)》讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScriptAPI。《O'Reilly精品图书系列:JavaScript权威指南(第6版)》涵盖了HTML5和ECMAScript5,很多...
JavaScript是一种广泛应用于Web开发的脚本语言,它主要在客户端运行,为网页添加交互性,使得用户能够与页面进行动态沟通。"Head First JavaScript"是一本面向初学者的优秀教材,旨在通过直观、易懂的方式教授...
JavaScript手册中文版
JavaScript学习指南(第3版)》系统地介绍了JavaScript的基本语法、基本对象、调试工具与排错技术、事件处理机制、浏览器对象模型/文档对象模型(BOM/DOM)等方面的知识,并通过一个复杂的示例深入探讨了Ajax应用。...