1 / 21

DHTML & ALPHABET SOUP

This guide provides a comprehensive overview of DHTML techniques leveraging HTML 4.0 and JavaScript to manipulate the Document Object Model (DOM) effectively. It covers accessing individual document objects, styling with Cascading Style Sheets (CSS), and interaction handling for dynamic elements, such as links and tables. Various coding examples illustrate how to implement mouseover effects, dynamic CSS updates, and layered elements, enriching user experience. Additionally, topics like browser detection and dropdown menus are discussed, emphasizing modern web design practices.

floriane-martin
Télécharger la présentation

DHTML & ALPHABET SOUP

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. DHTML & ALPHABET SOUP Sp.772 spring 2002

  2. 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

  3. 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”)

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

  5. 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

  6. 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”;}

  7. 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>

  8. ..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”)

  9. 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>

  10. 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”; }

  11. 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”; }

  12. 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>

  13. style classes • <style type=“text/css”> .welcome { font-family….} </style> …. <p class=“welcome”>Welcome to Bill’s World!</p>

  14. 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;”>

  15. 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

  16. 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

  17. 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;}

  18. 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>

  19. 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”;}

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

  21. 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 EACHGROUP MUST GO TO PRESENT THAT NIGHT. 7:30pm

More Related