1. Day 2 – JavaScript & PHP

2.  Have the hover effect display an extra image  Add an extra image for each of the tags  In your writeText() function, you can pass it more information than just txt  writeText(txt, imgSrc, imgAlt) ▪ imgSrc – will be the src attribute value (the name of an image) ▪ imgAlt – will be the alt attribute value  With this information, when you hover over an area of the image map, you can display an image as well  In the function block, create a variable to display your div  var winText = ‘ <img src=“’ + imgSrc + ‘“ alt=“’;  winText += imgAlt + ‘” /> ’;  Add another document.getElementById() and pass it the new variable like so:  document.getElementById("window").innerHTML = WinText;  In the of your page, add a tag with an id attribute of “window” 

3.  Goal: using an online tutorial, find a CSS-styled navigation bar (using a nested list of links), and add the JavaScript files and code to animate the menu  Resources:  http://users.tpg.com.au/j_birch/plugins/superfish/ http://users.tpg.com.au/j_birch/plugins/superfish/  http://css.maxdesign.com.au/listamatic2 http://css.maxdesign.com.au/listamatic2  http://w3schools.com/jquery/default.asp http://w3schools.com/jquery/default.asp  http://jquery.com/ http://jquery.com/

4.  Superfish makes use of jQuery  jQuery is a well-stocked library of awesome JavaScript goodness  Get it from http://jquery.com/http://jquery.com/  Understanding jQuery is like eating an elephant, 1 bite at a time  Superfish allows us to create dynamic menus  We can animate them  They can have a pause effect  They can create drop-shadows  Superfish is quite popular these days  It’s super fishey!

5.  Start with your every day standard web page  Add your navigation by creating a nested list of links  Try CSS Max Design’s Listamatic2 (http://css.maxdesign.com.au/listamatic2)http://css.maxdesign.com.au/listamatic2 ▪ Note: this works with both horizontal and vertical styled nested lists  Try Using the Superfish zip archive (http://users.tpg.com.au/j_birch/plugins/superfish/#downl oad)http://users.tpg.com.au/j_birch/plugins/superfish/#downl oad  Try Dynamic Drive’s CSS Library (http://www.dynamicdrive.com/style/)http://www.dynamicdrive.com/style/  For our purposes, let’s use a Listamatic2 list  Find one that you like, and one that doesn’t look like it will create problems

6.  Add the listamatic HTML code  It’s a nested list of links  Place it after your title  Create a navigation style sheet (navigation.css)  Add the CSS code into this page  Save it in the same folder  In the head of your page, link to a navigation style sheet  Use the @import method (it hides it from crusty browsers) ▪ @import url(‘navigation.css’);  You’re now ready to add the Superfish

7.  Begin by downloading the Superfish zip archive on the Download Page  Extract All Files  Open superfish- 1.4.8\superfish-1.4.8\js  Copy all *.js files and place them in your main folder  Add one little class to your main tag (the first of your navcontainer)   Note: If the already has a class attribute, do the following   In the head of your page:  Link to the following: ▪ superfish.css ▪ jquery-1.2.6.min.js ▪ superfish.js  Initialize the plugins like so // initialise plugins jQuery(function(){ jQuery('ul.sf- menu').superfish(); });

8.  Goal: Create a simple web page form with a variety of form input elements that asks the user for name, age, email, & comments with a submit button.  Steps:  Create a page with form elements  Make sure all required fields are completed  Check to make sure the email is in the right format  Resources:  http://htmldog.com/guides/htmlbeginner/forms/ http://htmldog.com/guides/htmlbeginner/forms/  http://w3schools.com/js/js_form_validation.asp http://w3schools.com/js/js_form_validation.asp

9.  Please refer to http://htmldog.com/guides/htmlbeginner/forms/ http://htmldog.com/guides/htmlbeginner/forms/  Add the tag  action=“contactus.php”  method=“post”  Add the following Form Elements:  use 1 for name, age, & email  for the comment field 

10.  Please refer to http://w3schools.com/js/js_form_validation.a sp http://w3schools.com/js/js_form_validation.a sp  Make sure…  Name & email are filled out  Email is in the proper format ▪ There is some text, then an @ sign, some more text, then a dot (.), and then some more text