javascript图片库威力增强版

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="layout.css" media="screen"/>
</head>

<body οnlοad="countBodyChildren()">
<h1>Snapshots</h1>
<ul>
<li><a href="Blue hills.jpg" οnclick="showPic(this);return false;" title="the mountain of blue">山峦</a></li>
<li><a href="Sunset.jpg" οnclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
<li><a href="Water lilies.jpg" οnclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
<li><a href="Winter.jpg" οnclick="showPic(this);return false;" title="a white world">雪林</a></li>
</ul>
<img id="placeholder" src="gallery.JPG" alt="my image gallery"/>
<p id="description">Choose an image</p>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>

showPic.js

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;
}

layout.css

@charset "utf-8";
/* CSS Document */

body{
   font-family:Arial, Helvetica, sans-serif;
   color:#333;
   font-family:"新宋体";
   background-color:#ccc;
}
h1{
   color:#333;
   background-color:transparent;
}
a{
   color:#c60;
   background-color:transparent;
   font-weight:bold;
   text-decoration:none;
}
ul{
   padding:0;
}
li{
   float:left;
   padding:1em;
   list-style:none;
}
img{
   display:block;
   clear:both;
}

转载于:https://www.cnblogs.com/daochong/p/4843123.html

javascript图片库威力增强版相关推荐

Firefox 增强版仅仅5.7 MB
Mozilla firefox,是由Mozilla基金会与火狐工作者所开发的一个轻便.快速.简单与高扩充性的网页浏览器.Firefox已经是Mozilla开发的焦点,是Mozilla基金会的官方浏览器 ...
中华黑豹增强版木马分析
样本网址:http://download.csdn.net/detail/cs08211317dn/4144024 一．大致描述: 1. 样本名称:中华黑豹增强版.ex ...
jQuery 1.4版本的15个新功能（现在已经发布到jquery1.8,特别是增强版的live事件，支持 submit ， change ， focus 和 blur 事件）...
1.jQuery()创建DOM元素:支持传参设置属性之前,jQuery可以通过 attr 方法设置元素的属性,既可传属性的名和值,也可以是包含几组特定属性名值对的对象.在 jQuery 1.4 ...
喜乐沐足管理系统 v20070625 增强版免费
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
java用lambda函数排序,Java8：使用Lambda表达式增强版Comparator排序
学习路上的自我记录-------路好长,就问你慌不慌,大声港,不慌.----jstarseven. 实体类: package com.server.model; /** * Created by js ...
星际看录像工具bwlauncher v1.81 汉化版(增强版) 绿色
Welcome to my blog! <script language="javascript" src="http://avss.b15.cnwg.cn/cou ...
将表里的数据批量生成INSERT语句的存储过程增强版
原文:将表里的数据批量生成INSERT语句的存储过程增强版将表里的数据批量生成INSERT语句的存储过程增强版有时候,我们需要将某个表里的数据全部或者根据查询条件导出来,迁移到另一个相同结构的 ...
MySQL：讨人喜欢的 MySQL replace into 用法（insert into 的增强版）
讨人喜欢的 MySQL replace into 用法(insert into 的增强版) 在向表中插入数据的时候,经常遇到这样的情况:1. 首先判断数据是否存在: 2. 如果不存在,则插入:3.如果 ...
Facebook增强版LASER开源：零样本迁移学习，支持93种语言
来源| Facebook AI 研究院译者 | Linstancy 责编 | 琥珀出品 | AI 科技大本营(ID:rgznai100) [导语]为了加速自然语言处理 (NLP) 在更多语言上实现 ...

javascript图片库威力增强版

javascript图片库威力增强版相关推荐

最新文章

热门文章