1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 5 <title>Web Design</title> 6 <style type="text/css" media="screen"> 7 @import url(styles/layout.css); 8 </style> 9 <script type="text/javascript" src="scripts/addLoadEvent.js"></script> 10 <script type="text/javascript" src="scripts/insertAfter.js"></script> 11 <script type="text/javascript" src="scripts/moveElement.js"></script> 12 <script type="text/javascript" src="scripts/prepareSlideshow.js"></script> 13 </head> 14 <body> 15 <h1>Web Design</h1> 16 <p>These are the things you should know.</p> 17 <ol id="linklist"> 18 <li> 19 <a href="structure.html">Structure</a> 20 </li> 21 <li> 22 <a href="presentation.html">Presentation</a> 23 </li> 24 <li> 25 <a href="behavior.html">Behavior</a> 26 </li> 27 </ol> 28 </body> 29 </html>
layout.css
1 #slideshow { 2 width: 100px; 3 height: 100px; 4 position: relative; 5 overflow: hidden; 6 } 7 #preview { 8 position: absolute; 9 }
addLoadEvent.js
1 function addLoadEvent(func) { 2 var oldonload = window.onload; 3 if (typeof window.onload != 'function') { 4 window.onload = func; 5 } else { 6 window.onload = function() { 7 oldonload(); 8 func(); 9 } 10 } 11 }
insertAfter.js
1 function insertAfter(newElement, targetElement) { 2 var parent = targetElement.parentNode; 3 if (parent.lastChild == targetElement) { 4 parent.appendChild(newElement); 5 } else { 6 parent.insertBefore(newElement, targetElement.nextSibling); 7 } 8 }
moveElement.js
1 function moveElement(elementID, final_x, final_y, interval) { 2 if (!document.getElementById) return false; 3 if (!document.getElementById(elementID)) return false; 4 var elem = document.getElementById(elementID); 5 if (elem.movement) { 6 clearTimeout(elem.movement); 7 } 8 if (!elem.style.left) { 9 elem.style.left = "0px"; 10 } 11 if (!elem.style.top) { 12 elem.style.top = "0px"; 13 } 14 var xpos = parseInt(elem.style.left); 15 var ypos = parseInt(elem.style.top); 16 if (xpos == final_x && ypos == final_y) { 17 return true; 18 } 19 if (xpos < final_x) { 20 var dist = Math.ceil((final_x - xpos) / 10); 21 xpos = xpos + dist; 22 } 23 if (xpos > final_x) { 24 var dist = Math.ceil((xpos - final_x) / 10); 25 xpos = xpos - dist; 26 } 27 if (ypos < final_y) { 28 var dist = Math.ceil((final_y - ypos) / 10); 29 ypos = ypos + dist; 30 } 31 if (ypos > final_y) { 32 var dist = Math.ceil((ypos - final_y) / 10); 33 ypos = ypos - dist; 34 } 35 elem.style.left = xpos + "px"; 36 elem.style.top = ypos + "px"; 37 var repeat = "moveElement('" + elementID + "'," + final_x + "," + final_y + "," + interval + ")"; 38 elem.movement = setTimeout(repeat, interval); 39 }
prepareSlideshow.js
1 function prepareSlideshow() { 2 // Make sure the browser understands the DOM methods 3 if (!document.getElementsByTagName) return false; 4 if (!document.getElementById) return false; 5 // Make sure the elements exist 6 if (!document.getElementById("linklist")) return false; 7 var slideshow = document.createElement("div"); 8 slideshow.setAttribute("id", "slideshow"); 9 var preview = document.createElement("img"); 10 preview.setAttribute("src", "img/topics.gif"); 11 preview.setAttribute("alt", "building blocks of web design"); 12 preview.setAttribute("id", "preview"); 13 slideshow.appendChild(preview); 14 var list = document.getElementById("linklist"); 15 insertAfter(slideshow, list); 16 // Get all the links in the list 17 var links = list.getElementsByTagName("a"); 18 // Attach the animation behavior to the mouseover event 19 links[0].onmouseover = function() { 20 moveElement("preview", -100, 0, 10); 21 } 22 links[1].onmouseover = function() { 23 moveElement("preview", -200, 0, 10); 24 } 25 links[2].onmouseover = function() { 26 moveElement("preview", -300, 0, 10); 27 } 28 } 29 addLoadEvent(prepareSlideshow);