真想不明白啊..这个脚本是鼠标以上去在#move改变图片同时a标签的title的值被替换在#description里.
但ie6和IE7出错了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.demo{width:92px;height:139px;text-align:center;line-height:139px;border:1px solid #ccc;overflow:hidden;}
</style> <script type="text/javascript">
function image2(whichpic){
var item = whichpic.getAttribute("href");
document.getElementById("image").src=item; var desc = document.getElementById("description");
var text = whichpic.getAttribute("title");
desc.lastChild.nodeValue = text;
}
function slideshow(){
var createElem = document.createElement("p");
createElem.setAttribute("id","description");
var createText = document.createTextNode("这里全是美女");
createElem.appendChild(createText);
document.body.appendChild(createElem); var demo = document.getElementById("demo");
var img = document.createElement("img");
img.setAttribute("id","image");
img.setAttribute("src","images/img.jpg");
demo.appendChild(img);
}
window.onload = slideshow;
</script>
</head> <body>
<div id="wrap">
<ul id="list">
<li><a href="images/img.jpg" title="美女1" onmouseover="image2(this)">图片1</a></li>
<li><a href="images/img1.jpg" title="美女2" onmouseover="image2(this)">图片2</a></li>
<li><a href="images/img2.jpg" title="美女3" onmouseover="image2(this)">图片3</a></li>
<li><a href="images/img3.jpg" title="美女4" onmouseover="image2(this)">图片4</a></li>
</ul>
<div class="demo" id="demo">
</div> </div>
</body>
</html>
但ie6和IE7出错了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style type="text/css">
.demo{width:92px;height:139px;text-align:center;line-height:139px;border:1px solid #ccc;overflow:hidden;}
</style> <script type="text/javascript">
function image2(whichpic){
var item = whichpic.getAttribute("href");
document.getElementById("image").src=item; var desc = document.getElementById("description");
var text = whichpic.getAttribute("title");
desc.lastChild.nodeValue = text;
}
function slideshow(){
var createElem = document.createElement("p");
createElem.setAttribute("id","description");
var createText = document.createTextNode("这里全是美女");
createElem.appendChild(createText);
document.body.appendChild(createElem); var demo = document.getElementById("demo");
var img = document.createElement("img");
img.setAttribute("id","image");
img.setAttribute("src","images/img.jpg");
demo.appendChild(img);
}
window.onload = slideshow;
</script>
</head> <body>
<div id="wrap">
<ul id="list">
<li><a href="images/img.jpg" title="美女1" onmouseover="image2(this)">图片1</a></li>
<li><a href="images/img1.jpg" title="美女2" onmouseover="image2(this)">图片2</a></li>
<li><a href="images/img2.jpg" title="美女3" onmouseover="image2(this)">图片3</a></li>
<li><a href="images/img3.jpg" title="美女4" onmouseover="image2(this)">图片4</a></li>
</ul>
<div class="demo" id="demo">
</div> </div>
</body>
</html>
<p id="description"></p>
这个p元素在第一次的时候是没有子元素的
所以lastchild为null报错
错了,经过实验发现了。真晕倒
楼主的
<meta name="Description" content="">
和创建的p元素的id相同了 createElem.setAttribute("id","description");
改一下就好了