文件路径其实就是一个属性值;修改路径就是修改属性值而已;只不过这个属性值修改起来不只是简单地赋值来进行的修改的;
那修改图片路径来举例,就是先找到需要修改的元素src属性值;
把它用变量保存起来,这里是不修改源文件路径;
把新的路径赋给保存源文件路径的变量;
把这个新路径值传给需要修改的图片路径;
上面说了思路,我用了2种方法来实现,
这个实例是鼠标移过改变图片路径;
第一种方法:
var oImg = document.getElementById("box").getElementsByTagName("img");
var oDiv = document.getElementsByTagName("div")[0];
for (var i = 1; i < oImg.length; i++) {
oImg[i].onmouseover = function () {
var img = new Image();
img.src = oImg[0].src = this.src.replace(/small/, "big");
oDiv.style.display = "block";
if (img.complete) {
oDiv.style.display = "none";
} else {
oImg[0].onload = function () {
oDiv.style.display = "none"
}
}
// img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function () {
// oDiv.style.display = "none"
// })
}
}
创建img对象,利用它的src属性,给它赋值,利用replace方法,改变图片路径,这里图片路径需要说一下,我这个路径是文件夹是同一个,文件名又不一样的地方,使用replace改变它;
这里onload方法是记载图片;
complete属性是判断图片是否加载完;加载完返回true;否则返回false;
第二种方法:
var oLi = document.getElementById("box").getElementsByTagName("li");
for(var i=1;i<oLi.length;i++){
oLi[i].onmouseover = function(){
var v = this.getElementsByTagName("img")[0].attributes["src"].value;
var nv = v.replace(/small/,"big");
oLi[0].getElementsByTagName("img")[0].attributes["src"].value = nv;
}
}
找到鼠标当前停留的img的路径;attributes找到元素的某属性;
同样replace改变文件名,相当于新的路径;
把新的路径给需要显示新路径的文件的元素
css代码:
body,ul,li{
margin: 0;
padding: 0;
}
body{
background: #ccc;
}
img{
border: 0;
border-radius: 5px;
}
ul{
list-style-type: none;
}
#box{
width: 212px;
border: 5px solid #000;
overflow: hidden;
zoom:1;
background: #fff;
border-radius: 5px;
margin: 10px auto;
padding: 0 0 3px 3px;
}
#box li,
#box li img {
float: left;
width: 50px;
height: 50px;
}
#box li {
margin: 3px 3px 0 0;
}
#box li.first{
position: relative;
}
#box li.first,
#box li.first img{
width: 156px;
height: 156px;
}
#box li.first div{
position:absolute;
top: 0;
left: 0;
width: 156px;
height: 156px;
display: none;
opacity: 0.5;
filter: alpha(opacity=50);
background: #fff;
}
使用了无序列表,第一个li的大小需要特殊设置,给它添加了first类,包括第一个li里面的img,div。
html5代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标移过,改变图片路径</title>
<link rel="stylesheet" href="y.css">
</head>
<body>
<ul id="box">
<li class="first"><img src="img/big_1.jpg">
<div></div>
</li>
<li>
<a href="javascript:;"><img src="img/small_1.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_2.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_3.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_4.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_5.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_6.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_7.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_8.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_9.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_10.jpg">
</a>
</li>
<li>
<a href="javascript:;"><img src="img/small_11.jpg">
</a>
</li>
</ul>
<script src="y.js"></script>
</body>
</html>