Lets apply the best practices to the Image Gallery.
/*** index.html ***/
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Image Gallery</title> <Linkrel= "stylesheet"href= "Styles/layout.css"Media= "Screen"></Head><Body> <H1>Snapshiots</H1> <ulID= "Imagegallery"> <Li> <ahref= "Images/fireworks.jpg"title= "A Fireworks display">Fireworks</a> </Li> <Li> <ahref= "Images/coffee.jpg"title= "A Cup of black coffe">Coffee</a> </Li> <Li> <ahref= "Images/rose.jpg"title= "A red, Red Rose">Rose</a> </Li> <Li> <ahref= "Images/bigben.jpg"title= "The famous Clock">Big Ben</a> </Li> </ul> <DivID= "Placeholder"> <imgsrc= "Images/placeholder.gif"alt= "My Image gallery" > </Div> <DivID= "description"> <P>Choose an image</P> </Div> <Scripttype= "Text/javascript"src= "Scripts/showpic.js"></Script> <Scripttype= "Application/javascript">//alert (description.childNodes.length);//window.onload = Countbodychildren;//var description = document.getElementById ("description");//alert (description.childnodes[2].nodevalue); </Script></Body></HTML>
View Code
/*** Showpic.js ***/
/** * Created by Administrator on 9/9/2015.*/functionAddloadevent (func) {varOldonload =window.onload; if(typeofWindow.onload! = ' function ') {window.onload=func; } Else{window.onload=function() {oldonload (); Func (); } }}functionPreparegallery () {if(!document.getelementsbytagname)return false; if(!document.getelementbyid)return false; if(!document.getelementbyid ("Imagegallery"))return false; varGallery = document.getElementById ("Imagegallery"); varLinks = gallery.getelementsbytagname ("a"); for(vari=0; i<links.length; i++) {Links[i].onclick=function() { returnShowpic ( This) ?false:true; } }}/*can use this function to count how many children nodes the BODY element contains*/functionCountbodychildren () {varBody_element = document.getElementsByTagName ("body") [0]; alert (Body_element.nodetype); alert (body_element.childNodes.length);}functionShowpic (whicpic) {if(!document.getelementsbytagname)return false; if(!document.getelementbyid ("placeholder"))return false; varSource = Whicpic.getattribute ("href"); varplaceholder = document.getElementById ("placeholder"); varimg = Placeholder.getelementsbytagname ("img") [0]; Img.setattribute ("SRC", source); if(document.getElementById ("description")) { varText = Whicpic.getattribute ("title")? Whicpic.getattribute ("title"): 3; varDescription = document.getElementById ("description"); varDesc_p = Description.getelementsbytagname ("P") [0]; Desc_p.firstChild.nodeValue=text; } return true;} Addloadevent (preparegallery);
View Code
/*** Layout.css ***/
Body{font-family:"Helvetica", "Arial", serif;Color:#333;Background-color:#ccc;margin:1em 10%;}H1{Color:#333;/*background-color: #777;*/}a{Color:#c60;Background-color:Transparent;Font-weight:Bold;text-decoration:None;}ul{padding:0;}Li{float: Left;padding:1em;List-style:None;}img{Display:Block;Clear:both;}
View Code
I think there is a function you can use in the furture, thats the addloadevent ():
function Addloadevent (func) { var oldonload = window.onload; if typeof Window.onload! = ' function ') {= func ; Else { function() { oldonload (); Func (); }}}
This was a good plan for the future expansion.
This effectively creates a queue of functions to being executed when the page loads.
To add functions to the this queue, I just need to write:addloadevent (firstfunction); Addloadevent (secondfunction);
The Image Gallery revisited