Day 2 – JavaScript & PHP

 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” 

 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:    

 Superfish makes use of jQuery  jQuery is a well-stocked library of awesome JavaScript goodness  Get it from  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!

 Start with your every day standard web page  Add your navigation by creating a nested list of links  Try CSS Max Design’s Listamatic2 ( ▪ Note: this works with both horizontal and vertical styled nested lists  Try Using the Superfish zip archive ( oad) oad  Try Dynamic Drive’s CSS Library (  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

 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 method (it hides it from crusty browsers) url(‘navigation.css’);  You’re now ready to add the Superfish

 Begin by downloading the Superfish zip archive on the Download Page  Extract All Files  Open superfish \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 min.js ▪ superfish.js  Initialize the plugins like so // initialise plugins jQuery(function(){ jQuery('ul.sf- menu').superfish(); });

 Goal: Create a simple web page form with a variety of form input elements that asks the user for name, age, , & comments with a submit button.  Steps:  Create a page with form elements  Make sure all required fields are completed  Check to make sure the is in the right format  Resources:  

 Please refer to  Add the tag  action=“contactus.php”  method=“post”  Add the following Form Elements:  use 1 for name, age, &  for the comment field 

 Please refer to sp sp  Make sure…  Name & are filled out  is in the proper format ▪ There is some text, then sign, some more text, then a dot (.), and then some more text