摘自： javascript DOM 编程艺术

1. 在一个网页上切换显示不同的图片

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Image Gallery</title>
<script type="text/javascript" src="script/showPic.js"></script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li>
<a href="images/fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">
Fireworks
</a>
</li>
<li>
<a href="images/coffee.jpg" title="A cup of black coffee" onclick="showPic(this); return false;">Coffee</a>
</li>
<li>
<a href="images/rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a>
</li>
<li>
<a href="images/bigben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a>
</li>
</ul>
<img id="placeholder" src="data:images/placeholder.gif" alt="my image gallery">
<p id="description">Choose a image.</p>
</body>
</html>

showPic.js

function showPic(whichpic) {

var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}

2.在同一个网页上切换显示不同的文本

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

javascript DOM(2) 一个网页上切换显示不同的图片或文本的更多相关文章

  1. 【Hadoop故障处理】全分布下，DataNode进程正常启动，但是网页上不显示，并且DataNode节点为空

    [故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts   的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...

  2. 怎么用Python Flask模板jinja2在网页上打印显示16进制数？

    问题:Python列表(或者字典等)数据本身是10进制,现在需要以16进制输出显示在网页上 解决: Python Flask框架中 模板jinja2的If 表达式和过滤器 假设我有一个字典index, ...

  3. ASP.NET 一个页上需要显示多个验证码

    1.后台获取验证字节流,以字符串的形式返回到前端. public ActionResult GetValidateGraphic() { var validate = new ValidateCode ...

  4. HTML在网页上不能显示图片问题

    我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...

  5. Django1.11搭建一个简易上传显示图片的后台

    本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 项目展示需要,之前没研究过Django,网上查资料快速做了一个后台,写下了防止自己忘了. p ...

  6. 安卓开发分享功能，分享到facebook网页上不显示图片的问题

    最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...

  7. Hadoop完全分布式环境下，DataNode进程正常启动，但是网页上不显示DataNode节点

    Hadoop完全分布式环境下,上传文件到hdfs上时报错: // :: WARN hdfs.DFSClient: DataStreamer Exception org.apache.hadoop.ip ...

  8. 编写html与js交互网页心得：编写两个按钮切换显示不同的图片

    第一步:先建立一个html网页,如下: <!DOCTYPE html><html> <head>  <meta charset="utf-8&quo ...

  9. 网页上10秒倒计时，完了后就自动跳转到另一个网页上html代码

    用html代码的话就这样: <meta http-equiv="Refresh" content="10;URL=http://www.baidu.com" ...

随机推荐

  1. 内存管理 & 内存优化技巧 浅析

    内存管理 浅析 下列行为都会增加一个app的内存占用: 1.创建一个OC对象: 2.定义一个变量: 3.调用一个函数或者方法. 如果app占用内存过大,系统可能会强制关闭app,造成闪退现象,影响用户 ...

  2. 在WIN7/8下把XP装入VHD （下）

    系统平台:win8.1,安装在C盘 操作目的:在win8.1下装一个VHD  XP. 操作方法: 在http://www.cnblogs.com/mahocon/p/5212914.html里贴了一个 ...

  3. javascript预编译

    刚学前端的小白,第一次写博客,难免有点幼稚.以后每周写两次博客,慢慢积累. 笨鸟不必先飞,但一定是最后一个留下的.加油! JS的预编译定义 在一段程序执行前,js会把var和function这两个关键 ...

  4. PAT乙1003

    这次终于觉得智商不够用了,特么的. 总结给你的经验,对于这样字符串的题目,经常会出现一种叫做递归定义的东西. 还有一种叫做,相同的字母表示相同的字符串. 这道题目一共有三个条件. 1. 字符串中必须仅 ...

  5. Android Studio 提示Error running app: No Android facet found for app

    错误解决办法如下: 可以通过以下几个步骤解决该问题: 1) 点击菜单File -> 选择Project Structure, 或使用快捷键 (Ctrl+Alt+Shift+S) 打开”Proje ...

  6. Linux运维常用的命令详解

    1. 查看系统内核版本 [root@funsion geekxa]# cat /etc/issue CentOS release 6.5 (Final) Kernel \r on an \m 显示了系 ...

  7. JSP标准标签库(JSTL)--XML标签库 x

    ³在开发中XML解析的操作是非常烦琐的,幸运的是在JSTL中专门提供了用于XML解析的操作,这样用户就可以不用费力的去研究SAX或DOM等操作的使用,就可以轻松的进行XML文件的解析处理.  XML标 ...

  8. mac编译openssl扩展报错 openssl.c:44:10: fatal error: 'openssl/evp.h' file not found

    解决办法 brew link openssl --force 然后 ./configure --with-openssl --with-php-config=/usr/local/php/bin/ph ...

  9. Win下安装Cygwin中的SSH服务

    windows和linux各有其优越性,可以安装在同一台电脑上,但切换要重启.同时拥有两台电脑,一台装win,一台装linux,自然非常好,但具备此条件的不多.本文介绍cygwin,它可以让你在win ...

  10. DIV 浮动存不占空间

    DIV 浮动存不占空间比如<div style="width:80px; border:1px solid #333"><div style="floa ...