Hover Button Hover button Rename any two pictures in C:/100/pics to pic1.jpg and pic2.jpg pic1.jpg and pic2.jpg have to be at C:\100\pics folder your html file in C:\100 folder Type the codes below within <body> part of the html file (re-type it because of different coding of quotation marks) <img src=“pics/pic1.jpg” alt=”pics” style="border-style:none” onmouseover="this.src = ’pics/pic2.jpg’” onmouseout = “this.src = ‘pics/pic1.jpg’” >
Rotating Banner Tutorial on Javascript Rotating banners http://www.w3schools.com http://www.htmlgoodies.com/beyond/javascript/article.php/3881826/JavaScript-Tutorial-Adding-Rotating-Images-to-Your-Web-Site.htm Rotating banners Insert codes in the next slide for header In the <body>, insert the following code where you want the rotating banner <layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
<header> <script language="JavaScript1.2"> var howOften = 5; //number often in seconds to rotate var current = 0; //start the counter at 0 var ns6 = document.getElementById&&!document.all; //detect netscape 6 // place your images, text, etc in the array elements here var items = new Array(); items[0]="<a href='link.htm' ><img alt='image0 (9K)' src='pics/pic1.jpg' height='300' width='300' border='0' /></a>"; //a linked image items[1]="<a href='link.htm'><img alt='image1 (9K)' src='pics/pic2.jpg' height='300' width='300' border='0' /></a>"; //a linked image function rotater() { document.getElementById("placeholder").innerHTML = items[current]; current = (current==items.length-1) ? 0 : current + 1; setTimeout("rotater()",howOften*100); } if(document.layers) { document.placeholderlayer.document.write(items[current]); document.placeholderlayer.document.close(); if(ns6)document.getElementById("placeholderdiv").innerHTML=items[current] if(document.all) placeholderdiv.innerHTML=items[current]; current = (current==items.length-1) ? 0 : current + 1; //increment or reset window.onload=rotater; //--> </script> </header>
Bird Walk Download www.cs.uml.edu/~kim/100/birdwalk.html Save to your C:\100 If you do not have "b_plover.gif" picture, you have to download it from www.cs.uml.edu/~kim/100/b_plover.gif Open birdwalk.html in the Notepad View the source code, and see if you can change the background and the banner pictures.