G053 Lecture 14 Adding Graphical Rollovers Manually Mr C Johnston ICT Teacher

Session Objectives Understand the advantages of using a roll over to indicate that a link is present, Inserted the necessary code to so that buttons change when mouse is pointed over them.

Overview Buttons are obviously hyperlinks but a nice touch is to make them standout by adding a rollover effect, This attracts attention and people are more likely to click on them, Task D requires you to use HTML code to add a wide range of facilities to your site – by following these steps you will add code for graphics, hyperlinks, formatting text and interactivity!!

Evidence Evidence for tasks D needs to show that you have manually added the code, The moderator needs to be sure that you HAVE added code and you have not cheated, Good evidence will include: Screen shots of code view and design view before Annotated screen shot of code view and design view whilst adding the code to demonstrate understanding Screen shots of code view and design view after the addition

Task 1: Add Buttons 1.Select the cell where the buttons will live and set the alignment. 2.Add code so each image will be displayed using the tag – the border=“0” property will ensure a nasty blue outline wont appear 4.Use the tag to add space between your buttons – use multiple to get more space

Task 2: Add Image Names Each of your images on your bar needs to have a name added. Add this within the tag using name=“[image name]” property Use names which reflect which the button is for e.g. a button for the France page call France – do not include any spaces in the name of the button.

Task 3: Add Hyperlink Close Tag Add a hyperlink close tag after each of the tags

Task 4: Add Simple Hyperlink Add a hyperlink tag before each of the tags Although you have not yet made your pages - use names which reflect what the page is for e.g. call the France page France

Task 5: Add Rollover Effect Add the mouseover code onmouseover=“document.images.[image name].src=‘[path and filename]’” and the mouseout code onmouseout=“document.images.[image name].src=‘[path and filename]’” to the first of the tags: Repeat this for each of the buttons ensuring each time you change the button name and the filename of the button in the mouseover and mouseout code

Final Code

Proof

Topic Exercise Carry out the steps described during this presentation. Most import thing is to have annotated code showing before and after the changes. Remember to show how you have added code with annotated screen shots.