• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Chapter 5. Dropdown Menus > The Whole Code

The Whole Code

We've made a lot of changes without looking at the code in a single piece, so here it is (Example 5-8).

Example 5-8. The whole code

<html>
<head>
<title>Welcome to Shelley Biotech!</title>

<style type="text/css">
#header { position: absolute; left: 36; top: 31; }

#nav { position: absolute; left: 0; top: 122; }

#gal { position: absolute; left: 515; top: 74; }

#submenu { position: absolute; left: 33; top: 163; }

#shortcut { position: absolute; left: 33; top: 163; }

.copy {
    font-family: verdana, sans-serif;
    font-size: 10px
}

</style>

<script language="JavaScript">
// preload images

newsOn = new Image()
newsOn.src = "images/nav_news_on.gif"
newsOff = new Image()
newsOff.src = "images/nav_news_off.gif"

productsOn = new Image()
productsOn.src = "images/nav_products_on.gif"
productsOff = new Image()
productsOff.src = "images/nav_products_off.gif"

researchOn = new Image()
researchOn.src = "images/nav_research_on.gif"
researchOff = new Image()
researchOff.src = "images/nav_research_off.gif"

storeOn = new Image()
storeOn.src = "images/nav_store_on.gif"
storeOff = new Image()
storeOff.src = "images/nav_store_off.gif"

aboutOn = new Image()
aboutOn.src = "images/nav_about_on.gif"
aboutOff = new Image()
aboutOff.src = "images/nav_about_off.gif"

// browser test
browser = navigator.appName;
browserNum = parseInt(navigator.appVersion);

if ((browser == "Netscape") && (browserNum < 5))
{
     layerRef = "nav.document."
     formRef = "shortcut.document."
}
else
{
     layerRef = ""
     formRef = ""
}



function rollOver (imgName)
{
     eval("document." + layerRef + "images[imgName].src =  " +
     imgName + "On.src")
}

function rollOut (imgName)
{
     eval("document." + layerRef + "images[imgName].src = " +
     imgName + "Off.src")
}

secondMenuArray = new Array()

function populateSecondMenu(mainItem)
{
     // Create appropriate array full of Option
     // objects. These are placed in the second menu
     // later in this function
     if (mainItem == "news")
     {
       secondMenuArray = new Array()
       populateArray("BioHomeLab 7.0 released","news/biolab.html")
       populateArray("Irving Archbite named as CEO","news
       /ceo.html")
       populateArray("Thornacycline trials expanded","news
       /thorn.html")
     }
     else if (mainItem == "products")
     {
       secondMenuArray = new Array()
       populateArray("BioHomeLab 7.0","prod/biolab.html")
       populateArray("EasyCreature Kit","prod/ceo.html")
       populateArray("Quantum-Chaos Replicator","prod
       /replicator.html")
     }
     else if (mainItem == "research")
     {
       secondMenuArray = new Array()
       populateArray("Downs Syndrome","research/downs.html")
       populateArray("Cancer","research/cancer.html")
       populateArray("Chromosome Capping","research/capping.html")
       populateArray("AIDS","research/aids.html")
       populateArray("Male Birth Control Pill","research
       /guy_pill.html")
     }
     else if (mainItem == "store")
     {
       secondMenuArray = new Array()
       populateArray("Shirts","store/shirts.html")
       populateArray("Hats","store/hats.html")
       populateArray("Mugs","store/mugs.html")
       populateArray("3-Eyed Fish","store/fish.html")
       populateArray("Level 4 Containment Suits","store/suits.html")
     }
     else if (mainItem == "about")
     {
       secondMenuArray = new Array()
       populateArray("History","about/history.html")
       populateArray("Philosophy","about/philo.html")
       populateArray("Giving Back","about/charity.html")
       populateArray("Leadership","about/leadership.html")
       populateArray("Careers","about/jobs.html")
     }

     // Clear out all existing entries (except top one)
     // in the secondary menu
     secondMenuObj = eval("document." + formRef +
     "navForm.secondMenu")

     with (secondMenuObj)
     {
       //clear existing items in secondary menu
       for(i=options.length-1;i>0;i--)
       {
         options[i] = null
       }

       // populate secondary menu with new items
       for (i=0; i<secondMenuArray.length; i++)
       {
         options[i+1] = secondMenuArray[i]
       }
     }
}


function populateArray(displayText, nextPage)
{
     nextIndex = secondMenuArray.length
     secondMenuArray[nextIndex] = new Option(displayText,nextPage)
}

function changePage(page)
{
     if (page.length)
     {
       location.href = page
     }
}

</script>

<body bgcolor="#FFFFFF">

<div id="header"><img src="images/shelley.gif"></div>

<div id="gal"><img src="images/freak_gal.jpg"></div>

<div id="nav">
<table border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="images/nav_begin.gif"></td>
      <td>
        <a href="#" onMouseOver="rollOver('news')"
        onMouseOut="rollOut('news')"><img src="images
        /nav_news_off.gif" name="news" border="0"></a></td>
      <td><a href="#" onMouseOver="rollOver('products')"
        onMouseOut="rollOut('products')"><img src="images
        /nav_products_off.gif" name="products" border="0"></a></td>
      <td><a href="#" onMouseOver="rollOver('research')"
        onMouseOut="rollOut('research')"><img src="images
        /nav_research_off.gif" name="research" border="0"></a></td>
      <td><a href="#" onMouseOver="rollOver('store')"
        onMouseOut="rollOut('store')"><img src="images
        /nav_store_off.gif" name="store" border="0"></a></td>
      <td><a href="about.html" onMouseOver="rollOver('about')"
        onMouseOut="rollOut('about')"><img src="images
        /nav_about_off.gif" name="about" border="0"></a></td>
    </tr>
</table>
</div>


<div id="shortcut">
<form name="navForm">
<select name="mainMenu" class="copy" onChange="populateSecondMenu(this.options[this.selectedIndex]
.value)">
    <option value="">Pick a section
    <option value="news">News
    <option value="products">Products
    <option value="research">Research
    <option value="store">Shelley Store
    <option value="about">About Shelley
</select>

<select name="secondMenu" class="copy" onChange="changePage(this.options[this.selectedIndex].value)">
    <option value="">Pick a page
    <!--
      Need to keep these for Netscape 4.
      Otherwise, the dropdown menu is only
      one item in height, and hard to read
    -->
    <option value="">
    <option value="">
    <option value="">
    <option value="">
    <option value="">
    <option value="">
    <option value="">
    <option value="">
    <option value="">
</select>
</form>
</div>
</body>
</html>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint