list.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Design</title>
<link href="styles/10.2layout.css" rel="stylesheet" media="screen"/>
</head>
<body>
<h1>Web Design</h1>
<p>These are the things you should know.</p>
<ol id="linklist">
<li>
<a href="structure.html">Structure</a>
</li>
<li>
<a href="presentation.html">Presentation</a>
</li>
<li>
<a href="behavior.html">Behavior</a>
</li>
</ol>
<div id="slideshow">  
<img src="images/topics.gif" alt="building blocks of web design" id="preview"/>
</div>
<script src="scripts/prepareSlideshow.js"></script>
<script src="scripts/addLoadEvent.js"></script>
<script src="scripts/moveElement.js"></script>
</body>
</html>10.2layout.css#slideshow{
width:100px;
height:100px;
position:relative; 
overflow:hidden;  prepareSlideshow.jsaddLoadEvent(prepareSlideshow);
function prepareSlideshow(){
if(!document.getElementById){
return false;
}
if(!document.getElementsByTagName){
return false;
}
if(!document.getElementById("linklist")){
return false;
}
if(!document.getElementById("preview")){
return false;
}
var preview=document.getElementById("preview");
preview.style.position="absolute";
preview.style.left="0px";
preview.style.top="0px";
var list=document.getElementById("linklist");
var links=list.getElementsByTagName("a");
links[0].onmouseover=function(){
moveElement("preview",-100,0,10);
};
links[1].onmouseover=function(){
moveElement("preview",-200,0,10);
};
links[2].onmouseover=function(){
moveElement("preview",-300,0,10);
};
}addLoadEvent.jsfunction addLoadEvent(func){
"use strict";
var oldload=window.onload;
if(typeof window.onload!='function'){
window.onload=func;
}else{
window.onload=function(){
oldload();
func();
};
}
}moveElement.jsfunction moveElement(elementID,final_x,final_y,interval){
if(!document.getElementById){
return false;
}
if(!document.getElementById(elementID)){
return false;
}
var elem=document.getElementById(elementID);
var xpos=parseInt(elem.style.left);   
var ypos=parseInt(elem.style.top);
if(xpos==final_x&&ypos==final_y){
return true;
}
if(xpos<final_x){
xpos++;
}
if(xpos>final_x){
xpos--;
}
if(ypos<final_y){
ypos++;
}
if(ypos>final_y){
ypos--;
}
elem.style.left=xpos+"px";
elem.style.top=ypos+"px";
movement=setTimeout(function(){
moveElement(elementID,final_x,final_y,interval);
},interval);
}通过firefox打开之后能显示静态的网页画面,但是不能实现onmouseover动画效果,请问问题出在哪儿