Lesson Plan
 
IMOS Home Student Center TallTech Home
 

January 25, 2000

Details

Title

 DHTML Intro

Time Allotment

3 hrs

Reading / References

Objectives

Coursework / Lab Work

Exercises

  1. Complete the tutorial on the DOM: http://www.webcoder.com/howto/15/index.html. You will not only get a chance to revisit the DOM, but you will see how DHTML can be used to make the web more dynamic.
  2. Follow through some of the lessons outlined in Dynamic HTML Developer Zone http://www.projectcool.com/developer/dynamic/
  3. Go to http://www.talltech.com/student/shared/dhtml/zoomtext.htm and observe the result. Do a View, Source and save the code to your floppy. Try adapting the script for your own use using your own URL and page text.
  4. Try the following code:

<HTML>
<HEAD>
<TITLE>Crossbrowser DHTML -Browsercheck</TITLE>
</HEAD>

<script language="javascript">
<!--
    //if explorer (4.x)
    if (document.all) {
    layerRef='document.all'
    styleRef='.style.'
}
//else if netscape (4.x)
else if (document.layers) {
    layerRef='document.layers'
    styleRef='.'
} 
else{
    location.href="not4x.html"
}
function show(){
    eval(layerRef+'["divTest"]'+styleRef+'visibility="visible"') 
}
function hide(){
    eval(layerRef+'["divTest"]'+styleRef+'visibility="hidden"') 
}
//-->
</script>

<BODY>
    <a href="javascript:hide('divText')">hide1</a> <a href="javascript:show('divText')">show1</a>
    <div id="divTest" style="position:absolute; left:100; width:190; height:400; top:200">
        This is the text that hides and shows
    </div>
</BODY>
</HTML>

Assuming that your browser is 4.x, you will be able to show and hide the block of text titled "This is the text that hides and shows"

  1. Try loading the following examples (from the Dynamic HTML black book). View the source! Also try them with both browsers...

http://www.talltech.com/student/shared/dhtml/BUBBLE.HTM

http://www.talltech.com/student/shared/dhtml/BUBBLE2.HTM

http://www.talltech.com/student/shared/dhtml/BUB_FONT.HTM

http://www.talltech.com/student/shared/dhtml/BUB_JSS.HTM

http://www.talltech.com/student/shared/dhtml/BUB_NS~1.HTM

http://www.talltech.com/student/shared/dhtml/BUB_OBJ.HTM

http://www.talltech.com/student/shared/dhtml/BUB_VB.HTM

http://www.talltech.com/student/shared/dhtml/FADE.HTM

http://www.talltech.com/student/shared/dhtml/LAME1.HTM