Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.
Add some <script> tags into this page at the marked place. Code a JavaScript function which adds a CSS property specifiying a background image of your choice to the following <div> block. Have the button below trigger this by calling your function from an event handler which you will include.
The background image you add should tile in all directions.
Remember: you will need assign a CSS property enclosed in a string to the JavaScript style property. You should remind yourself how to add a background image using CSS.
The object of this task is to alter the menu below so that it begins with each sub-menu hidden and then, by means of clicking the top level menu heading, each sub menu will appear. When a new sub-menu is shown, any displayed sub-menu should be hidden so that only one sub menu can be open at any one time.
You will need to use JavaScript to alter the CSS of the sub-menu blocks as the result of onclick events made on the hyperlinks inside the <h2> tags. These links have already been filled with the javascript: command which will cause the browser to run the code that follows rather than load a new page. Remember to remove -- your function here-- and replace it with your code.
Code a pair of <script> tags at an appriopriate point in this page. Note: the position of this block in this exercise can be cruicial!
Create a JavaScript function to hide all of the sub-menus. Name this function appropriately. This will need to use getElementById() to retrieve the sub-menu blocks and the style property to alter the visibility of them. Add a line to run this function so that all sub-menus are hidden by default.
Create a function to show a sub-menu, the name of the sub-menu to be shown should be passed into the function as a parameter. This function should make sure that any open sub-menus are closed (you could re-use the function you have already written for this). Next it should use getElementById() to retrieve the sub-menu block and then use the style property to alter the visibility so that the menu is shown.
Make sure you remember to call this second function from the hyperlinks inside the <h2> tags where indicated in the code below.