Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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
• <p id=“simple”>simple paragraph</p>• 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
<style>
a {text-decoration: none; color: #0000FF; }
</style>
<script language=“javascript”>
Function turnOn(currentLink) {
CurrentLink.style.color = “#990000”;
CurrentLink.style.textDecoration = “underline”;}
Continued…
• Function turnOff(currentlink) {
currentLink.style.color = “#0000FF”;
currentLink.style.textDecoration = “none”;}
</script>
<head> <a href=“home.html”
onMouseOver=“turnOn(this);” onMouseOut = “turnOff(this);”> home </a>
..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:
• <td class = “toolbar” id = “news” width -= “120”> <a href=“#” onMouseOver=“linkOn(this, ‘news’);”
• onMouseOut = “linkOff(this, ‘news’);”>
News! </a> </td>
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
• <style type=“text/css”>
a {font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #FFFFFF; text-decoration: none;}
. toolbar { background-color: #666666;}
</style>
style classes
• <style type=“text/css”>
.welcome { font-family….}
</style>
….
<p class=“welcome”>Welcome to Bill’s World!</p>
Layers
• A positionable container (like photoshop)• x,y,z dimensions • z dimension points out at the user• <div id=“MyLayer” style =
“position.absolute;z-index:1; left:100px;top:10px; width:300px;height:30px; background-color: #FFCC00;”>
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
• <td width=“100”>• <div id = “linksLayer”
style=“position:absolute;left:211px….visibility:hidden;z-index:2”>
• <a href=“#”>DHTML</a><br>• <a href=“#>CSS</a><br> </div><a href=“#” onClick=showLayer(‘linksLayer’);”
onDblClick=“hideLayer(‘linksLayer’);”>Links</a> </td>
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
