Upload
grace-kelly
View
215
Download
1
Embed Size (px)
Citation preview
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 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"/> <img src="../images/AboutOut.gif" border="0" name="about"/> <img src="../images/FranceOut.gif" border="0" name="france"/> <img src="../images/GermanyOut.gif" border="0" name="germany"/> <img src="../images/ItalyOut.gif" border="0" name="italy"/> <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> <img src="../images/AboutOut.gif" border="0" name="about"/></a> <img src="../images/FranceOut.gif" border="0" name="france"/></a> <img src="../images/GermanyOut.gif" border="0" name="germany"/></a> <img src="../images/ItalyOut.gif" border="0" name="italy"/></a> <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> <a href=“../about.html”><img src="../images/AboutOut.gif" border="0" name="about"/></a> <a href=“../france.html”><img src="../images/FranceOut.gif" border="0" name="france"/></a> <a href=“../germany.html”><img src="../images/GermanyOut.gif" border="0" name="germany"/></a> <a href=“../italy.html”><img src="../images/ItalyOut.gif" border="0" name="italy"/></a> <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>
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>
<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>
<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>
<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>
<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>
<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>