javascript代码 不兼容IE以外浏览器

js代码如下:
<!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=gb2312" />

<style type="text/css">

img.thumb_img {
cursor:pointer;
margin-right:10px;
width:75px;
height:60px;
}
img#main_img {
cursor:pointer;
display:block;
width:500px;
height:375px;
}
</style>
<title>切换图片</title>
</head>

<body>
<div style="width:500px;">
<img id="main_img" src="upfile/Avalon/Bar Chair/l20101015041658.jpg" alt="bay" rel="upfile/Avalon/Bar Chair/s20101015041658.jpg" link="index.html" /><br/>
<img class="thumb_img" src="upfile/Avalon/Bar Chair/s20101015041658.jpg" rel="upfile/Avalon/Bar Chair/l20101015041658.jpg" alt="bay1" link="1.html" onmousemove="change()" /><img class="thumb_img" src="upfile/Avalon/Bar Chair/s20101015041706.jpg" rel="upfile/Avalon/Bar Chair/l20101015041706.jpg" alt="bay1" link="1.html" onmousemove="change()" />
</div>
<script type="text/javascript" language="javascript">
function $(e) {return document.getElementById(e);}
document.getElementsByClassName = function(cl) {
var retnode = [];
var myclass = new RegExp('\\b'+cl+'\\b');
var elem = this.getElementsByTagName('*');
for (var i = 0; i < elem.length; i++) {
var classes = elem[i].className;
if (myclass.test(classes)) retnode.push(elem[i]);
}
return retnode;
}
function change(){
var thumbs = document.getElementsByClassName('thumb_img');
for (var i=0; i<thumbs.length; i++) {
thumbs[i].onmouseover = function () {$('main_img').src=this.rel; $('main_img').link=this.link;};
thumbs[i].onclick = function () {location = this.link}
}
$('main_img').onclick = function () {location = this.link;}}
</script>
</body>
</html>
在IE下运行良好,其他浏览器不行,怎么回事?我只有50分,麻烦了
或者提供一个效果一样的也可以,效果要完全一样的,包括图片的排列方式,谢了

$('main_img').src=this.rel;
这种写法在非IE下是不正确的。

应改为$('main_img').setAttribute("src",this.getAttribute("rel"));

function change(){
var thumbs = document.getElementsByClassName('thumb_img');
for (var i=0; i<thumbs.length; i++) {
thumbs[i].onmouseover = function () {$('main_img').setAttribute("src",this.getAttribute("rel")); $('main_img').setAttribute("link",this.getAttribute("link"));};
thumbs[i].onclick = function () {location = this.getAttribute("link");}
}

另外,你这种写法,执行起来还是有小问题,会导致鼠标第一次碰到图片的时候没反应。

应该在页面加载的时候,先调用一次change();然后两个img里的onmouseover事件可以不要了。
温馨提示:内容为网友见解,仅供参考
无其他回答
相似回答