G053 Lecture 14

Adding Graphical Rollovers Manually

Mr C JohnstonICT Teacher

www.computechedu.co.uk

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 Buttons1. Select the cell where the buttons will live and set the alignment. 2. Add code so each image will be displayed using the <img> tag

– the border=“0” property will ensure a nasty blue outline wont appear

4. Use the &nbsp; tag to add space between your buttons – use multiple to get more space

<img src=“[path and filename]” border=“0”>

Task 2: Add Image Names Each of your images on your bar needs to have a

name added. Add this within the <img> tag using name=“[image

name]” property <img src="../images/HomeOut.gif" border="0" name="home"/>&nbsp;&nbsp;<img src="../images/AboutOut.gif" border="0" name="about"/>&nbsp;&nbsp;<img src="../images/FranceOut.gif" border="0" name="france"/>&nbsp;&nbsp;<img src="../images/GermanyOut.gif" border="0" name="germany"/>&nbsp;&nbsp;<img src="../images/ItalyOut.gif" border="0" name="italy"/>&nbsp;&nbsp;<img src="../images/SignUpOut.gif" border="0" name="signup"/>

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 </a> after each of the <img> tags

<img src="../images/HomeOut.gif" border="0" name="home"/></a>&nbsp;&nbsp;<img src="../images/AboutOut.gif" border="0" name="about"/></a>&nbsp;&nbsp;<img src="../images/FranceOut.gif" border="0" name="france"/></a>&nbsp;&nbsp;<img src="../images/GermanyOut.gif" border="0" name="germany"/></a>&nbsp;&nbsp;<img src="../images/ItalyOut.gif" border="0" name="italy"/></a>&nbsp;&nbsp;<img src="../images/SignUpOut.gif" border="0" name="signup"/></a>

Task 4: Add Simple Hyperlink

Add a hyperlink tag <a href=“[path and file]”> before each of the <img> tags<a href=“../home.html”><img src="../images/HomeOut.gif" border="0" name="home"/></a>&nbsp;&nbsp;<a href=“../about.html”><img src="../images/AboutOut.gif" border="0" name="about"/></a>&nbsp;&nbsp;<a href=“../france.html”><img src="../images/FranceOut.gif" border="0" name="france"/></a>&nbsp;&nbsp;<a href=“../germany.html”><img src="../images/GermanyOut.gif" border="0" name="germany"/></a>&nbsp;&nbsp;<a href=“../italy.html”><img src="../images/ItalyOut.gif" border="0" name="italy"/></a>&nbsp;&nbsp;<a href=“../signup.html”><img src="../images/SignUpOut.gif" border="0" name="signup"/></a>

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 codeonmouseover=“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 <a href> 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

<a href=“../home.html” onmouseover=“document.images.home.src=‘images/homeOver.gif’” onmouseout=“document.images.home.src=‘images/homeOut.gif’” ><img src="../images/homeOut.gif" border="0" name="home"/></a>&nbsp;&nbsp;

Final Code<a href=“../home.html” onmouseover=“document.images.home.src=‘images/homeOver.gif’” onmouseout=“document.images.home.src=‘images/homeOut.gif’” > <img src="../images/homeOut.gif" border="0" name="home"/></a>&nbsp;&nbsp;

<a href="../about.html" onmouseover=“document.images.about.src=‘images/aboutOver.gif’” onmouseout=“document.images.about.src=‘images/aboutOut.gif’” ><img src="../images/aboutOut.gif" border="0" name="about"/></a>&nbsp;&nbsp;

<a href="../france.html" onmouseover=“document.images.france.src=‘images/franceOver.gif’” onmouseout=“document.images.france.src=‘images/franceOut.gif’” ><img src="../images/franceOut.gif" border="0" name="france"/></a>&nbsp;&nbsp;

<a href="../germany.html" onmouseover=“document.images.germany.src=‘images/germanyOver.gif’” onmouseout=“document.images.germany.src=‘images/germanyOut.gif’” ><img src="../images/germanyOut.gif" border="0" name="germany"/></a>&nbsp;&nbsp;

<a href="../italy.html" onmouseover=“document.images.italy.src=‘images/italyOver.gif’” onmouseout=“document.images.italy.src=‘images/italyOut.gif’” ><img src="../images/italyOut.gif" border="0" name="italy"/></a>&nbsp;&nbsp;

<a href="../signup.html" onmouseover=“document.images.signup.src=‘images/signUpOver.gif’” onmouseout=“document.images.signup.src=‘images/signUpOut.gif’” ><img src="../images/signUpOut.gif" border="0" name="signup"/></a>

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.