<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. 1、MyBatis框架底层初涉

    1.拜年 哈哈,现在是过年了,祝大家新年好. 本来大过年的是不打算碰电脑的,(抢票除外,三疯同学现在还没抢到票,然后突然又延长假期了).现在疫情严重,被堵家里不能出去了.不能为国家做贡献,但是起码不能 ...

  2. 部署java的spring boot项目(代码外包提供)

    部署java后台的spring boot 人脸识别系统的项目 基础环境准备: 硬件:内存4g  cpu 4核  硬盘200g  虚拟机 软件:CentOS 7.6  mysql 5.7.26  jdk ...

  3. PyQt5操作SQLite数据库

    1.操作SQLite数据库import sysfrom PyQt5.QtSql import QSqlDatabase,QSqlQueryfrom PyQt5.QtCore import * def ...

  4. splash-简介及入门

    splash 1.      splash简介 Splash是一个JavaScript渲染服务,是一个带有HTTP API的轻量级浏览器,同时它对接了Python中的Twisted和QT库.利用它,我 ...

  5. Linux下运行SuperSocket记录

    Linux下运行SuperSocket程序步骤   需要将原程序的配置文件中的内容拷贝一份,改名成SuperSocket.SocketService.exe.config1.Linux中运行.Net程 ...

  6. 吴裕雄 python 神经网络——TensorFlow TFRecord样例程序

    import numpy as np import tensorflow as tf from tensorflow.examples.tutorials.mnist import input_dat ...

  7. js指定范围指定个数的不重复随机数

    今天偶然看到的 比如要生成 1-100范围之内的10个不重复随机数,代码就可以这么写 var arr = []; for (var i = 1; i <=100; i++) { arr.push ...

  8. PCSearch

    1.hinstance:GetModuleHandle(NULL) 2.窗口直角: 方法1:在Oncreate函数中添加以下代码,然而这种方法会导致窗口阴影无效 LONG styleValue = : ...

  9. css不起作用报错:Resource interpreted as Stylesheet but transferred with MIME type text/html

    解决:https://blog.csdn.net/sky_cui/article/details/86703706 找了好久........

  10. php 高级 PHP的垃圾回收机制

    PHP可以自动进行内存管理,清楚不再需要的对象.PHP使用了引用计数这种单纯的垃圾回收机制.每个对象都内含一个引用计数器,每个reference链接到对象,计数器加1,当reference离开生存空间 ...