DHTML & ALPHABET SOUP Sp.772 spring 2002

A combination Html 4.0 Javascript The document object model (DOM) -- accessing individual document objects Cascading style sheets -- separation of form and content Netscape 6, IE 5.5/6

DOM Document.images[] accesses all the images in a document (we’ve seen it in billboard type image-displays) Suppose we want to access headings, paragraphs, and individual words simple paragraph In javascript: var para = document.getElementByID(“simple”)

getElementsby… Var headings = document.getElementsByTagName(“h1”); Var secondheading = headings[2]

CSS The element of style Para.style.color = “#00FF00”; Changes the paragraph to green Other properties: style.font-size style.font- family style.background-color, style.background-image

Rollover link color changes a {text-decoration: none; color: #0000FF; } Function turnOn(currentLink) { CurrentLink.style.color = “#990000”; CurrentLink.style.textDecoration = “underline”;}

Continued… Function turnOff(currentlink) { currentLink.style.color = “#0000FF”; currentLink.style.textDecoration = “none”;} <a href=“home.html” onMouseOver=“turnOn(this);” onMouseOut = “turnOff(this);”> home

..explained When the users’ mouse goes over a link the event handler passes it to turnOn, modifying the style of the current link Note that values for style elements are specified as strings (e.g. “underline”)

A dynamic CSS toolbar..hang on! Highlights cells of a table Html for a cell: <a href=“#” onMouseOver=“linkOn(this, ‘news’);” onMouseOut = “linkOff(this, ‘news’);”> News!

linkOn Function linkOn(currentLink, cell) { currentLink.style.color = “#990000”; currentLink.style.fontWeight = “bold”; currentLink.style.textDecoration = “underline”; Var CurrentCell = document.getElementById(cell); currentCell.style.backgroundColor=“#CCCCCC”; }

linkOff Function linkOn(currentLink, cell) { currentLink.style.color = “#FFFFFF”; currentLink.style.fontWeight = “normal”; currentLink.style.textDecoration = “none”; Var CurrentCell = document.getElementById(cell); currentCell.style.backgroundColor=“#666666”; }

The header a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text- decoration: none;}. toolbar { background-color: #666666;}

style classes.welcome { font-family….} …. Welcome to Bill’s World!

Layers A positionable container (like photoshop) x,y,z dimensions z dimension points out at the user

div attributes position: can be absolute or relative (to any containing elemnt) left: distance from left edge of document/containing element (eg 100px) top: distance from top..(in pixels, too) z-index: stacking order of display if layers are overlapping. higher numbers win. elements without a z-index lose

Tabbed Folders (a la Hotmail) visibility:visible visibility:hidden have some function keep track of the current tab and the moused-over newtab, change their visibilities appropriately

Browser Detection if (document.getElementById) {isDOM = true;} else if(parseInt(navigator.appVersion) >= 4) { if(navigator.appName == “Netscape”) {isNN4 = true;} else if (navigator.appName==“Microsoft Internet Explorer”) {isIE4= true;}

Drop Down Menu Example DHTML CSS Links

show/hideLayer function showLayer(layerid) { var layer=document.getElementByID(layerid); layer.style.visibility = “visible”;} function hideLayer(layerid) { var layer=document.getElementByID(layerid); layer.style.visibility = “hidden”;}

more info w3c.org/style w3c.org/dom

Exercise… drop linkys WEDNESDAY: SHIGERU MIYAGAWA GUEST LECTURES!!!!!!!!!!! WILL BE FUN. UROP OPPRTUNITIES ABOUND! REMINDER: May 15th FINAL PROJECTS DUE AT LEAST ONE MEMBER FROM EACH GROUP MUST GO TO PRESENT THAT NIGHT. 7:30pm