<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图片的更多相关文章

  1. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  2. Echo.js – 简单易用的 JavaScript 图片延迟加载插件

    Echo.js 是一个独立的延迟加载图片的 JavaScript 插件.Echo.js 不依赖第三方库,压缩后不到1KB大小. 延迟加载是提高网页首屏显示速度的一种很有效的方法,当图片元素进入窗口可视 ...

  3. javascript图片懒加载与预加载的分析

    javascript图片懒加载与预加载的分析 懒加载与预加载的基本概念.  懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片, ...

  4. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

  5. javascript - 图片的幻灯片效果

    javascript 代码: <script type="text/javascript"> function select_play() { var select_p ...

  6. Javascript图片预加载详解 分类: JavaScript HTML+CSS 2015-05-29 11:01 768人阅读 评论(0) 收藏

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  7. javascript图片放大镜效果展示

    javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...

  8. 兼容最新firefox、chrome和IE的javascript图片预览实现代码

    这篇文章主要介绍了兼容最新firefox.chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6.firefox12.chrome 25.0.1364.172 m.IE ...

  9. JavaScript 图片与Base64数据互相转换脚本

    JavaScript 图片与Base64数据互相转换脚本 注: 转换过程中注意跨域问题.测试页是否支持相关标签创建.dom结构. 方法一:非Html 5使用FileReader 使用XMLHttpRe ...

  10. 【荐】JavaScript图片放大技术(放大镜)示例代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Linux - 找到正在使用的 Shell 是哪个

    1. ps -p $$ 一个名为 "$$" (这是shell的特殊参数),表示当前你正在运行的 shell 实例的 PID 2. echo $0 3. echo $SHELL - ...

  2. [Thiinking in Java]自闭学习之路(一)构造器

    前言- 本文是为个人学习做的整理性质的笔记,肯定带有许多不妥的地方,仅供参考. (第五章·初始化与清理 <Thinking in Java>) 用构造器确保初始化 正文- 构造器: 什么是 ...

  3. list随机生成数值

    List<int> numbers = Enumerable.Range(5, 10).ToList();

  4. UIResponder的API

    @property(nonatomic, readonly) UIResponder *nextResponder; 返回响应者链中的下一个响应者,或者nil如果没有下一个响应者. @property ...

  5. Python引用某一文件的方法出现红色波浪线

    from parse import parse_url#引用parse里面的方法 结果出现波浪线并提示 This inspection detects names that should resolv ...

  6. 吴裕雄--天生自然TensorFlow2教程:链式法则

    import tensorflow as tf x = tf.constant(1.) w1 = tf.constant(2.) b1 = tf.constant(1.) w2 = tf.consta ...

  7. 杭电 2097 sky数

    Sky数 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  8. Android 短信模块分析(七) MMS数据库定义及结构整理

    一. mmssms.db 数据库mmssms.db中表的定义见表4.1至4.18所示: 表4.1 addr(彩信地址) 字段名 类型 描述 备注 _id INTEGER PRIMARY_KEY 主键I ...

  9. @implementer,抽象类,接口

    @implementer,抽象类,接口 1.      implementer 在看twisted源码时,经常出现@implementer(IReactorFDSet) 它来自zope.interfa ...

  10. 解决Hibernate配置文件不在SRC文件夹下获取Session方法