javascript DOM(2) 一个网页上切换显示不同的图片或文本
摘自： 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) 一个网页上切换显示不同的图片或文本的更多相关文章
- 【Hadoop故障处理】全分布下，DataNode进程正常启动，但是网页上不显示，并且DataNode节点为空
[故障背景] DataNode进程正常启动,但是网页上不显示,并且DataNode节点为空. /etc/hosts 的ip和hostname配置正常,各个机器之间能够ping通. [日志错误信息] ...
- 怎么用Python Flask模板jinja2在网页上打印显示16进制数？
问题:Python列表(或者字典等)数据本身是10进制,现在需要以16进制输出显示在网页上 解决: Python Flask框架中 模板jinja2的If 表达式和过滤器 假设我有一个字典index, ...
- ASP.NET 一个页上需要显示多个验证码
1.后台获取验证字节流,以字符串的形式返回到前端. public ActionResult GetValidateGraphic() { var validate = new ValidateCode ...
- HTML在网页上不能显示图片问题
我遇到的问题是写了一个HTML程序,结果在网页上面不能显示,原因是图片路径放置错了. 修改前代码: <!DOCTYPE html> <html> <head> &l ...
- Django1.11搭建一个简易上传显示图片的后台
本文为作者原创,转载请注明出处(http://www.cnblogs.com/mar-q/)by 负赑屃 项目展示需要,之前没研究过Django,网上查资料快速做了一个后台,写下了防止自己忘了. p ...
- 安卓开发分享功能，分享到facebook网页上不显示图片的问题
最近公司要上分享功能,分享的地方包括微信,qq,facebook,功能完成后,发现分享到facebook的内容只有文字可以显示,图片不显示,其中图片存储是使用七牛的服务器:而分享到微信和qq都可以正常 ...
- Hadoop完全分布式环境下，DataNode进程正常启动，但是网页上不显示DataNode节点
Hadoop完全分布式环境下,上传文件到hdfs上时报错: // :: WARN hdfs.DFSClient: DataStreamer Exception org.apache.hadoop.ip ...
- 编写html与js交互网页心得：编写两个按钮切换显示不同的图片
第一步:先建立一个html网页,如下: <!DOCTYPE html><html> <head> <meta charset="utf-8&quo ...
- 网页上10秒倒计时，完了后就自动跳转到另一个网页上html代码
用html代码的话就这样: <meta http-equiv="Refresh" content="10;URL=http://www.baidu.com" ...
随机推荐
- oracle_一次移动数据库dbf文件的操作
oracle数据库的dbf路径下面磁盘不足,需要把原始路径下面的dbf文件移动到另外一个磁盘路径下, 具体的操作有四步. 1.把整个表空间offline. 2.copy原始路径下的dbf文件到新的路径 ...
- Android ViewDragHelper完全解析 自定义ViewGroup神器
Android ViewDragHelper完全解析 自定义ViewGroup神器 转载请标明出处: http://blog.csdn.net/lmj623565791/article/detai ...
- PullToRefreshListView上拉加载、下拉刷新 eclipse项目
说明:此项目实在fragment中的,需要依赖library完成,还用到了Xuitls.jar包.使用了Pull解析XML eclipse中的项目: //注意:此刷新功能是使用的第三方的PullToR ...
- ViewPager和Fragment组合 v4包下的页面切换
/* *主页面下 */ //-------------主页面下---------------------- package com.example.viewpagerfragment; import ...
- gameUnity 0.2 网络游戏框架(计划)
能说的就是 请大家都耐心等待,不做国产垃圾,只追求国外经典,这就是 这套框架未来的发展 一:2d 3d场景融合 人物移动 2d 3d 层 移动 有差值(共6层,2d天空层.前景3d物体层有 景深), ...
- CodeForces--TechnoCup--2016.10.15--ProblemB--Bill Total Value（字符串处理）
Bill Total Value time limit per test 1 second memory limit per test 256 megabytes input standard inp ...
- Linux学习 -- Shell基础 -- Bash变量
变量 默认是字符串型,数值型需要显示指定 等号两侧都不能有空格 单引号:原始字符串 双引号:保留转义 命令结果作为值:反引号 或 $() 环境变量一般用大写 自定义变量 变量定义 name=& ...
- SpringMVC中获得HttpRequest对象的方法
1. 使用@autowired注入HttpRequest 2. 在方法中直接声明形参有HttpRequest即可. 3. 使用一个Listener,然后获取.
- CNS数据库网站只用mysql自带的fulltext index功能就可实现了。
1)编辑脚本script.sql如下 ALTER TABLE `table_name` ADD FULLTEXT (`column_name`) 2)在mysql console下输入命令 SOURC ...
- scp命令报错-bash: scp: command not found
# scp -bash: scp: command not found # which scp /usr/bin/scp # rpm -qf /usr/bin/scp openssh-clients- ...