CSD 340: The Week beginning Apr. 4
CSD 340: The Week beginning Apr. 4
Project: At least part of the project will be a Triva Quiz like the ongoing project described in Beginning JavaScript (Paul Wilton). Do some reading. Make up some questions.
Make a page like the one shown below. The small images of Hans Holbein works can be found in the zipped file below.
Write functions that handle the mouseover and mouseout events of the images so that when the user places the mouse over an image, that image gets larger and the information about the image is displayed in the third row of the table. For example, in the figure below the cursor was over "The Lady Elyot." (The information should vanish and the image should return to its regular size when the cursor is no longer over it.) You should avoid writing 8 mouseover handlers and 8 mouseout handlers by adding a parameter to the functions. Part of one of my image tags looked like:
onmouseover="return Show(11)"and my function started
function Show(Number)
When the user clicks on an image, the page should give rise to another window that displays the larger version of the image. Instead of creating the pages ahead of time, you can open a blank page and write HTML to it using a line such as
HolbeinWindow.document.write(PictureHTML);
If the user clicks on a second button, change the picture in the window. You can
do this by closing the previous document before writing. (This raises the issue that
the first time you attempt to close something that is not open. We discussed its
solution n Monday.)
Due Apr. 11
We wrote a quick image roll-over demo (RollOver.htm) at the end of class. It uses Paper.gif and Pencils.gif.
