javascript图片库

将图片发布到网上的办法很多,可以简单地把所有图片都放在一个网页中,但是会导致这个网页过于庞大。为每张图片分别创建一个网页的解决办法值得考虑,但是制作过程需要花费非常多的时间和精力。

如果想要两全其美,那我有一种方法,利用JavaScript制作一个图片库,把整个图片库的浏览链接到图片库主页,用户点击某个链接时,那张图片才会且在本页面显示。

html文件的编写

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

<body>
<h1>Snapshots</h1>
<ul>
<li><a href="Blue hills.jpg" onclick="showPic(this);return false;" title="the mountain of blue">山峦</a></li>
<li><a href="Sunset.jpg" onclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
<li><a href="Water lilies.jpg" onclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
<li><a href="Winter.jpg" onclick="showPic(this);return false;" title="a white world">雪林</a></li>
</ul>
<img id="placeholder" src="gallery.JPG" alt="my image gallery"/>
<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);
}

时间: 2024-10-12 23:56:57

javascript图片库的相关文章

平稳退化,JS和HTML标记分离,极致性能的JavaScript图片库

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript图片库</title> 6 <script type="text/javascript"> 7 <!--平稳退化,JS和HTML标记分离,极致性能的JS图片库--> 8 fu

小学生做程序的梦 之 1.JavaScript图片库

<!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title>JavaScript图片库 2017 09 12</title>  <script>    //建立一个函数替换占位图片  //whichPic代表指向某个图片的<a>元素   function showPic(whichPic){        //分解图片的路径,通过

JavaScript&#183;图片库之节点

通过简单的JavaScript 图片库案例来讲解函数应用及扩展. 这是一个图片库小页面,通过单击1.2.3.4在原来的页面变换图片和描述. 下面是HTML标签: 1 <body> 2 <h1>Snapshots</h1> 3 <ul> 4 <li><a href="images/1.jpg" onClick="showPic(this); return false;" title="one&

Javascript 图片库

本章内容: 1.编写一个优秀的标记文件; 2.编写一个Javascript 函数以显示用户想要查看的图片 3.由标记触发函数调用 4.使用几个新方法扩张这个函数 DOM属性: 1,childNodes属性:可以用来获取任何一个元素的所有子元素,他是一个包含这个元素全部子元素的数组;由childNodes 属性返回的数组包含所有类型的节点. 2.nodeType 元素节点的nodeType 属性值是1, 属性节点的nodeType 属性值是2, 文本节点的nodeType 属性值是3. 3,nod

javascript+dom 做javascript图片库

废话不多说 直接贴代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title> JAVASCRPIT图片的处理</title> <script type="text/javascript"> function showpic(whichpic){ var source = which

javaScript DOM编程艺术

第4章:javaScript 图片库 多个图片的问题,想想做个实例: 事件处理函数的工作机制:元素添加事件处理函数后,一旦事件发生,相应的js代码就会得到执行.被调用的JS代码可以返回一个值,这个值将被传递给那个事件处理函数. 一般返回true or false .true 事件处理函数认为 :事件发生 false  :认为事件没发生 nodeType:    1:元素节点 2:属性节点 3:文本节点 nodeValue: element[0].nodeValue == element.firs

JavaScript DOM编程艺术学习笔记(四)

第四章 案列研究: JavaScript图片库 利用JavaScript来创建图片库将是最佳的选择:把整个图片库的浏览链接集中安排在图片库主页里,只在用户点击了这个主页里的某个图片链接时才把相应的图片传送给他. 时间处理函数(event handler)的作用是,在特定时间发生时调用特定的JavaScript代码.例如,如果想在鼠标指针悬停在某个元素上时触发一个动作,就需要使用onmouseover事件处理函数;如果想在鼠标指针离开某个元素时触发一个动作,就需要使用onmouseout事件处理函

《JavaScript DOM 编程艺术》(第二版)读书笔记(二)

接下来正式进入DOM的学习 第三章 DOM D代表document(文档),O代表object(对象),M代表model(模型),简单的说DOM把一份文档表示成一颗“树”(数学上的概念). 节点(node),它表示一个网络的连接点.一个网络就是由一些节点构成的集合.DOM也是同样的情况,文档是由节点构成的集合. 1.元素节点(element node) <html>.<head>.<body>.<p>.<ul>等标签的名字就是元素的名字,比如文本

JavaScript DOM编程艺术读书笔记(一)

第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML(Dynamic HTML):动态HTML的简称,不是一项新技术,而是通过HTML CSS 和Javascript组合的.DHTML背后的含义其实就是: 利用HTML把网页标记为各种元素: 利用CSS设置元素样式和它们显示的位置: 利用JavaScript实时地操纵页面和改变样式. 但是虽然浏览器制造