The aim is to show a larger version of the food images on the menu page.  They will appear when the user clicks on the small image and disappear again when the user clicks on them.

The HTML

For now put a single big image there to see what it will look like.  Later you will add the JavaScript.

Open menu.html:

  1. add a new div as the first thing inside the body element
  2. give the div an id (it will hold the large image which appears so choose a suitable id)
  3. add an img element inside the div to show one of the larger images of food (e.g. dish1.png) in to see what it looks like
  4. save it and the image should be there at the top of the page
  5. add an HTML comment just before the new div explaining that this is a pop up image which will start invisible

The CSS

Choose borders, padding and margins to suit yourself and the site by adding a new rule to the external stylesheet.  Set the width to the width of you widest image and the height to the highest.  Use the id you gave the new div.  Put a CSS commment just before the new rule explaining that this is the pop up image which starts invisible.

Once the image looks as you want add this line to the rule:

display:none;

Save and view and the image should vanish.

The JavaScript

You should already have a script element at the top of menu.html.  If not then add one now and create an event trigger and handler:

  1. create a new function with a suitable name (it will make that big image appear once you have added the code below)
  2. inside the new function place just one line of code for now (an alert to say something for testing)
  3. in the HTML add an onmouseup event trigger to call the new function when the user clicks on the first food picture
  4. save and test - if the alert does not appear you have a mistake so fix it before continuing

Delete the alert line and in it's place addd a line which uses getElementById and it's style property to change the display of the image to block.  Test it and the image should appear.  If not fix it.

Add a JavaScript comment just above the function explaining what it does.

If you are thinking this is ugly don't worry you will come back to it and improve it.

Begone

Add another suitably named function to make the display setting go back to none.  Remember to add an onmouseup event trigger inside the larger img element.