Download
1 / 12
120 likes | 254 Views
G053 Lecture 14 Adding Graphical Rollovers Manually. Mr C Johnston ICT Teacher www.computechedu.co.uk. Session Objectives. Understand the advantages of using a roll over to indicate that a link is present,
E N D
G053 Lecture 14Adding Graphical Rollovers Manually Mr C Johnston ICT 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 Buttons • Select the cell where the buttons will live and set the alignment. • Add code so each image will be displayed using the <img> tag – the border=“0” property will ensure a nasty blue outline wont appear • 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 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 <a href> tags: • <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> • 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 <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>
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.
