Ross Sheppard High School
Computer Programming 10
Student Learning Guide
Fun and Useful Scripts

  When you have finished this project, you will be able to:
use the style tag
use the onmouse event
use and modify a variety of other DHTML scripts
describe what DHTML is
  1. In this project you will learn how to find, download, and use Dynamic HTML (DHTML) scripts.

  2. Each script must be saved on a separate page.

  3. There are many aspects to HTML scripting that you have learned in this course. There are many more that you have not. One of the tags that can be very useful is the STYLE tag.

  4. In this project, you will learn that basic syntax for the style tag, as well as some of it's variations.

  5. Create a folder called Scripts. Start a new Web page and save it as Style. For this part of the project, a simple Web page is fine; you will expand on it later on.

  6. Here's what the script means:
  7. Save your Web page in the Scripts folder and view it in your Browser.

  8. Observe what happens when you pass the mouse over the links, or select a link. Experiment with the colors.

  9. Have your teacher look at this script.

  10. Create a new Web page and save it in your Scripts folder as Mouseover.

  11. The next script you will write is the onmouseover script. The onmouseover event can be used for a number of purposes; for this project, you will create an onmouseover event that displays some text in the Document Status bar on the lower left corner of the Browser.

  12. Add the following tag to your Web page:



  13. Save and view your page.

  14. Observe the Document Status bar.

  15. Experiment with these tags.

  16. Have your teacher check your work so far.

  17. The next script you will learn is the Static Icon Script. Create another Web page and save it in your Scripts folder as StaticIcon.

  18. Use PaintShop to create your personal logo.

  19. Use PaintShop to resize the logo to about 40 pixels wide. Save the logo in your scripts folder.

  20. Copy the file named staticlogo.js from the Handouts folder to your Scripts folder.

  21. In your StaticIcon.htm file, add the following code just above the </HTML> tag:



  22. Save your file.
  23. Use Notepad to open the staticicon.js file. Edit it following the instructions in the file.

  24. Save the staticicon file.

  25. View your StaticIcon.htm file in your browser. If everything has been done correctly, then your icon should appear in the lower right corner of the Weg page.

  26. Have your teacher look at your Static Icon Web page.

  27. The next script you will create is a Date and Time script. Copy the file livedate.js from the Handouts folder to your Scripts folder.

  28. Create a new Web Page. Enter the following code after the <BODY> tag:



  29. In the <BODY> tag, add the following: onLoad="goforit()".

  30. Save your Web page and view it in a Browser.

  31. Ask your teacher to check your Date and Time Script.

  32. Next, you will create a menu script. Start a new Web page and save it in your Scripts folder at menu.htm

  33. Copy the following code into the <HEAD> container; that is, between the <HEAD> and </HEAD> tags:

    NOTE: you can copy and paste the text below - do NOT re-type it as you may make a mistake.

    <style>
    <!--#iewrap{
    position:relative;height:30px}
    #iewrap2{
    position:absolute}
    #dropmenu03{filter:revealTrans(Duration=1.5,Transition=12)
    visibility:hide}
    --></style>
  34. Copy the following script to the body of your Web page in the location that you want the menu to appear:

    NOTE: you can copy and paste the text below - do NOT re-type it as you may make a mistake.

    <ilayer id="dropmenu01" height=35px>
    <layer id="dropmenu02" visibility=show>
    <span id="iewrap">
    <span id="iewrap2" onClick="dropit2();event.cancelBubble=true;return false">
    <font face="Verdana"><b><a href="alternate.htm">Click Here</a></b></font>
    </span>
    </span>
    </layer>
    </ilayer>
    <script language="JavaScript1.2">
    /*
    Drop down menu link
    © Dynamic Drive (www.dynamicdrive.com)
    For full source code, installation instructions,
    100's more DHTML scripts, and Terms Of
    Use, visit dynamicdrive.com
    */

    //set below variable to false if you wish to turn off "fade-off" effect for IE 4 users
    var enableeffect=true
    //change the contents of the array to your own. You may extend this list as neccessary
    var selection=new Array()
    selection[0]='<font face="Verdana"><a href="ff">Link 1</a><br>'
    selection[1]='<a href="ff">Link 2</a><br>'
    selection[2]='<a href="ff">Link 3</a><br>'
    selection[3]='<a href="ff">Link 4</a><br>'
    selection[4]='<a href="ff">Link 5</a><br></font>'
    if (document.layers)
    document.dropmenu01.document.dropmenu02.visibility='show'
    function dropit2(){
    if (document.all){
    dropmenu03.style.left=document.body.scrollLeft+event.clientX-event.offsetX
    dropmenu03.style.top=document.body.scrollTop+event.clientY-event.offsetY+18
    if (dropmenu03.style.visibility=="hidden"){
    if (enableeffect)
    dropmenu03.filters.revealTrans.apply()
    dropmenu03.style.visibility="visible"
    if (enableeffect)
    dropmenu03.filters.revealTrans.play()
    }
    else{
    hidemenu()
    }
    }
    }
    function dropit(e){
    if (document.dropmenu03.visibility=="hide")
    document.dropmenu03.visibility="show"
    else
    document.dropmenu03.visibility="hide"
    document.dropmenu03.left=e.pageX-e.layerX
    document.dropmenu03.top=e.pageY-e.layerY+19
    return false
    }
    function hidemenu(){
    if (enableeffect)
    dropmenu03.filters.revealTrans.stop()
    dropmenu03.style.visibility="hidden"
    }
    function hidemenu2(){
    document.dropmenu03.visibility="hide"
    }
    if (document.layers){
    document.dropmenu01.document.dropmenu02.captureEvents(Event.CLICK)
    document.dropmenu01.document.dropmenu02.onclick=dropit
    }
    else if (document.all)
    document.body.onclick=hidemenu
    </script>
    <div id="dropmenu03" style="position:absolute;left:0;top:0;layer-background-color:lightyellow;background-color:lightyellow;width:120;visibility:hidden;border:2px solid black;padding:0px">
    <script language="JavaScript1.2">
    if (document.all)
    dropmenu03.style.padding='4px'
    for (i=0;i<selection.length;i++)
    document.write(selection[i])
    </script>
    </div>
    <script language="JavaScript1.2">
    if (document.layers){
    document.dropmenu03.captureEvents(Event.CLICK)
    document.dropmenu03.onclick=hidemenu2
    }
    </script>

  35. Note that your script has the following copyright notice in it (find this part of the script - do NOT add this code):

    /*
    Drop down menu link
    © Dynamic Drive (www.dynamicdrive.com)
    For full source code, installation instructions,
    100's more DHTML scripts, and Terms Of
    Use, visit dynamicdrive.com
    */ In order to legally use this script the copyright notice must appear in the script - do not delete it!

  36. Save your file and view it in a browser.

  37. You need to change the menu choices from the generic ones in the script to choices that make sense for you. In this case, you will create menu choices for each one of the scripts that you have created in this project.

  38. Look for "selection[]" in the script. Change each one to the name of a script file that you created. For example, the first selection might be: selection[0]='<font face="Verdana"><a href="StaticIcon.htm">Static Icon Script</a><br>'


    Note: be very careful when editing this script - if you make an error or delete or change any text other than whet you have been told to, the script will not work and you will have to re-do it.

  39. You may also need to change the width of the menu. Do this by changing the width attribute inside the <div> from 120 to another pixel value.

  40. Go to



    Dynamic Drive
    http://www.dynamicdrive.com

    and download three scripts that you would like to use that you have not used for this project.

  41. Create new Web pages for each of the scripts.

  42. In the Handouts folder, there are two more scripts that you might find interesting: dropping text.htm and glowing text.htm. Copy these scripts to your Scripts folder and try each one.

  43. Add these scripts to your menu script so that all of the scripts can be accessed from the menu script.

  44. On each of the script pages, create a link that goes back to the menu script.

  45. Click here to see the marking guide for this project.

  46. When your menu script is complete, save the project folder in your "Hand In" folder on your personal disk space so that this project can be graded..

© 1998-2000 N.F. Mathew, EdD
File name: scripts.htm
Last updated on October 19, 2003
J. Heslinga, DTE