JavaScript图片
<ul>
<li>
<a href="images/666.jpg" title="frist img">frist</a>
</li>
<li>
<a href="images/777.jpg" title="second img">second</a>
</li>
<li>
<a href="images/888.jpg" title="three img">three</a>
</li>
<li>
<a href="images/1111.jpg" title="four img">four</a>
</li>
</ul>
<img id="placeholder" width="500" height="500" src="" title="this is all img show">
要实现点击a元素 替换下面的图片。可以用以下方法实现
function showImg(dom){
var src = dom.getAttribute("href");
var img = document.getElementById("placeholder");
img.setAttribute("src",src);
}
var A = document.getElementsByTagName("a");
for(var i =0;i< A.length;i++){
A[i].onclick = function(){
showImg(this);
return false;
}
}
那么如果我们需要 替换img里面的title属性该怎么办呢?可以通过改写showImg来实现
function showImg(dom){
var text = dom.getAttribute("title");
var src = dom.getAttribute("href");
var img = document.getElementById("placeholder");
img.setAttribute("src",src);
img.setAttribute("title",text);
}
JavaScript图片的更多相关文章
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- Echo.js – 简单易用的 JavaScript 图片延迟加载插件
Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...
- javascript图片懒加载与预加载的分析
javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...
- javascript图片切换
JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...
- javascript - 图片的幻灯片效果
javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...
- Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- 兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...
- JavaScript 图片与Base64数据互相转换脚本
JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...
- 【荐】JavaScript图片放大技术(放大镜)示例代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- elasticsearch数据组织结构
elasticsearch数据组织结构 1. mapping 1.1. 简介 mapping:意为映射关系,特别是指组织结构.在此语境中可理解为数据结构,包括表结构,表约束,数据类型等 ...
- 吴裕雄--天生自然TensorFlow2教程:激活函数及其梯度
import tensorflow as tf a = tf.linspace(-10., 10., 10) a with tf.GradientTape() as tape: tape.watch( ...
- 吴裕雄 Bootstrap 前端框架开发——Bootstrap 网格系统实例:堆叠的水平
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- IEEE 802.11r-2008
IEEE 802.11r-2008 or fast BSS transition (FT), also called fast roaming, is an amendment to the IEEE ...
- pip-9.0.1更新到pip-10.0.1遇到的问题
使用 pip 安装第三方库时,报错: You are using pip version 9.0.3, however version 10.0.1 is available. You should ...
- 洛谷P2142 高精度减法 题解
想找原题请点击这里:传送门 原题: 题目描述 高精度减法 输入格式 两个整数a,b(第二个可能比第一个大) 输出格式 结果(是负数要输出负号) 输入输出样例 输入 复制 输出 复制 说明/提示 %数据 ...
- Python 基础之压缩模块zipfile与tarfile
一.压缩模块 zipfile (1)创建一个zip压缩包 import zipfile #zip_deflated 代表是压缩的意思#打开压缩包zf = zipfile.ZipFile("c ...
- 设计模式课程 设计模式精讲 3-7 接口隔离原则讲解及Coding
1 主讲内容 1.1 核心内容 1.2 优点 1.3 课程记录 2 代码演练 2.1 接口隔离原则反比 2.2 接口隔离原则正比 1 主讲内容 1.1 核心内容 总结:细粒度可以进行再组装,粗粒度不可 ...
- json字符串转换成json增删查改节点
一.功能实现 1.节点树查询: 按ID查询树 2.节点新增: http://host/tree_data/node/${treeId} in: {node: {key: ..., ...}, pare ...
- C#多态学习总结
面向对象编程三大特点 封装 继承 多态.今天我把自己学习多态的过程进行总结 多态 就是 同一个方法在不同情况下,会表选不同的效果(多个形态).在代码上表现就是 同一个父类对象 赋予不同的子类对象 就 ...