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/ ...
随机推荐
- powerbuilder连接oracle数据库
一.打开已经安装好的pb9.0,主界面菜单栏有个两个圆柱形就行数据库连接,点击database. 二.选择oracle版本,由于数据库版本是9i,可以使用084 oracle8/8i.右键--选择ne ...
- hexo 搭建静态博客 + Next 主题配置
参考手册 HEXO:https://hexo.io/zh-cn/ NEXT:http://theme-next.iissnan.com/ 安装hexo npm install hexo-cli -g ...
- uWSGI配置参数释义
uWSGI配置参数释义 socket : 地址和端口号,例如:socket = 127.0.0.1:50000 processes : 开启的进程数量 workers : 开启的进程数量,等同于pro ...
- ZOJ1006 Do the Untwist
简单模拟~ #include<bits/stdc++.h> using namespace std; ; int a[maxn]; unordered_map<char,int> ...
- WinForm开发(1)——DataGridView控件(1)——C# DataGridView控件用法介绍
DataGridView控件在实际应用中非常实用,特别需要表格显示数据时.可以静态绑定数据源,这样就自动为DataGridView控件添加相应的行.假如需要动态为DataGridView控件添加新行, ...
- 学习笔记(20)- Google LaserTagger
参考文章:推断速度达seq2seq模型的100倍,谷歌开源文本生成新方法LaserTagger 论文地址:https://research.google/pubs/pub48542/ 开源地址:htt ...
- 阿里大数据竞赛非官方指南第三弹-- LR入门
最近忙着赶global comm的deadline无暇比赛,当有功夫回过头来看的时候发现比赛已经夹杂了很多非技术的因素在里面了,就连我这个本来是写博客拉粉丝的也有点小不爽.本着我的初心是写博客拉粉丝, ...
- [python]python中的一些包以及他们的基本用处和安装
pika可以用来连接rabbitmqpip install pika -i http://pypi.douban.com/simple/ --trusted-host pypi.douban.com ...
- python记录点
python记录点 文件编码 Unicode使用最少2个字节(1个字节=1BYTE=8bit=一个长度为8的二进制数) 来表示字母和符号等,有时候是4个字节. UTF-8是对Unicode编码的压缩和 ...
- Assign the task-HDU3974 dfs序+线段树
题意: 一个公司有n个员工,每个员工都有一个上司,一个人下属的下属也是这个人的下属,因此可将他们的关系看成一棵树, 然后给定两种操作,C操作是查询当前员工的工作,T操作是将y工作分配给x员工,当一个人 ...