<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. eclipse修改工作空间编码格式

    一.修改workspace默认编码 eclipse打开window -> 打开preferences 二.修改jsp默认编码 eclipse打开window -> 打开preference ...

  2. Flexconnect部署

    该记录主要用于针对于无线网络中Flexconnect的部署,可能涉及到的有Flexconnect中的组件,如何部署.(注意:在7.2版本以前,Flexconnect叫做HREAP),目前都称作为Fle ...

  3. JAXB - java xml解析

    常用API JAXBContext类,是应用的入口,通过该类创建序列化和反序列化对象,也即编组对象和解组对象: Marshaller 编组接口,将Java对象序列化为XML数据: Unmarshall ...

  4. dom4j递归解析XML字符串所有子节点

    /** * dom4j递归解析所有子节点 * * @param childElements * @param mapEle * @return */ public Map<String, Obj ...

  5. 02-15Android学习进度报告十五

    今天学习了关于ListView Item多布局的实现.感觉有点困难. 何为ListView Item多布局,打个比方,QQ这种聊天列表 代码示例如下: public class MutiLayoutA ...

  6. 从蜘蛛侠到仙剑,为何知名IP都要开发VR游戏?

    去年3月底斯皮尔伯格指导的<头号玩家>上映,为全球玩家和影迷塑造出一个庞大.刺激而又真实无比的虚拟游戏世界--"绿洲".电影上映后,在人们感叹斯皮尔伯格旺盛的艺术想象力 ...

  7. url转码。

    Javascript 中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,deco ...

  8. 如何用 pycharm 调试 airflow

    airflow 和 pycharm 相关基础知识请看其他博客 我们在使用 airflow的 dag时. 每次写完不知道对不对的,总不能到页面环境中跑一下,等到报错再调试吧.这是很让人恼火的事情 这里我 ...

  9. wc、grep 、 cut、paste 和 tr 命令的用法

    1 wc 命令 wc 命令是一个统计的工具,主要用来显示文件所包含的行.字和字节数. wc 命令是 word count 的缩写. (1)命令格式 wc [选项] [文件] (2)常用参数 参数 描述 ...

  10. 使用IDEA导入一个Maven风格的SSM项目

    转自: 方法一: (我用的这种,导入的方法 File->New->Project from existing sources)(同理,important也是一样的) https://how ...