1. <ul>
  2. <li>
  3. <a href="images/666.jpg" title="frist img">frist</a>
  4. </li>
  5. <li>
  6. <a href="images/777.jpg" title="second img">second</a>
  7. </li>
  8. <li>
  9. <a href="images/888.jpg" title="three img">three</a>
  10. </li>
  11. <li>
  12. <a href="images/1111.jpg" title="four img">four</a>
  13. </li>
  14. </ul>
  15. <img id="placeholder" width="500" height="500" src="" title="this is all img show">

要实现点击a元素 替换下面的图片。可以用以下方法实现

  1. function showImg(dom){
  2. var src = dom.getAttribute("href");
  3. var img = document.getElementById("placeholder");
  4. img.setAttribute("src",src);
  5. }
  6. var A = document.getElementsByTagName("a");
  7. for(var i =0;i< A.length;i++){
  8. A[i].onclick = function(){
  9. showImg(this);
  10. return false;
  11. }
  12. }

那么如果我们需要 替换img里面的title属性该怎么办呢?可以通过改写showImg来实现

  1. function showImg(dom){
  2. var text = dom.getAttribute("title");
  3. var src = dom.getAttribute("href");
  4. var img = document.getElementById("placeholder");
  5. img.setAttribute("src",src);
  6. img.setAttribute("title",text);
  7. }

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. VMwarePro密钥

    VMware10Pro密钥 5F29M-48312-8ZDF9-A8A5K-2AM0Z VMware12Pro密钥 5A02H-AU243-TZJ49-GTC7K-3C61N VF5XA-FNDDJ- ...

  2. 【代码学习】PYTHON字符串的常见操作

    一.字符串运算符 下表实例变量 a 值为字符串 "Hello",b 变量值为 "Python": 操作符 描述 实例 + 字符串连接 >>>a ...

  3. 吴裕雄--天生自然Numpy库学习笔记:NumPy 广播(Broadcast)

    广播(Broadcast)是 numpy 对不同形状(shape)的数组进行数值计算的方式, 对数组的算术运算通常在相应的元素上进行. 如果两个数组 a 和 b 形状相同,即满足 a.shape == ...

  4. Keras入门——(1)全连接神经网络FCN

    Anaconda安装Keras: conda install keras 安装完成: 在Jupyter Notebook中新建并执行代码: import keras from keras.datase ...

  5. 数据库语言——SQL——基础部分——初篇

    概述 SQL全称为Structured Query Language,是关系型数据库的语言标准,它并不与特定的数据库商品类型有关,例如Mysql,Oracle,DB2等等都可以使用SQL语言,它与特定 ...

  6. mcast_join函数

    #include <errno.h> #include <string.h> #include <net/if.h> #include <netinet/in ...

  7. Vue专题系列

    一. 简介  1. 说明 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图 ...

  8. MySQL8.0 ROW_NUMBER、RANK、DENSE_RANK窗口函数 分组排序排名

    MySQL8.0 (ROW_NUMBER)窗口函数 排名 暂时理解函数意义,后面再进行优化,如果有关变量排序,查看这个大哥的 mysql的分组排序和变量赋值顺序 先查看一个例子: # 按照每科课程分数 ...

  9. UINavigationController+FDFullscreenPopGesture全屏回滑手势阅读理解

    滑动返回纯oc.纯swifthttps://github.com/Bonway/BBGestureBack UINavigationController+FDFullscreenPopGesture全 ...

  10. WebService-CXF 学习笔记

    什么是CXF Apache CXF = Celtix + Xfire支持多种协议:SOAP1.1,1.2XML/HTTPCORBA(Common Object Request Broker Archi ...