Assignment 7
Create interactive and dynamic behavior through JavaScript image event processing.
Required Knowledge & Skills
- Creating JavaScript event handling functions
- Manipulate the DOM
Add Interactivty
Chris wants his web site to be more interactive. In particular he would like to have customers be able to scroll through different destinations and learn about them. He would like his guests to see pictures and be able to hover over them and find out more about what destination it represents.
Add a mosaic of image to various destinations to your landing (home) page. The mosaic should consist of six images of your choosing. Each image must be of the same size and arranged in a 4x2 table (4 columns, 2 rows) -- 3 columns for the images and 1 column for the text -- use ROWSPAN to make the last column for the text span both rows. As the mouse cursor hovers over each image it should display information about the destination below the table. Use a custom color of light gray for the text. When no image is being hovered over it should display the default text "Move mouse over the images to view details about each destination."
Click here to view a screen short of what the new landing page should look like. Here's a short video demonstrating the behavior:
Add a mosaic of image to various destinations to your landing (home) page. The mosaic should consist of six images of your choosing. Each image must be of the same size and arranged in a 4x2 table (4 columns, 2 rows) -- 3 columns for the images and 1 column for the text -- use ROWSPAN to make the last column for the text span both rows. As the mouse cursor hovers over each image it should display information about the destination below the table. Use a custom color of light gray for the text. When no image is being hovered over it should display the default text "Move mouse over the images to view details about each destination."
Click here to view a screen short of what the new landing page should look like. Here's a short video demonstrating the behavior:
Getting Started
** Use Brackets in case you want to try out a different editor
- Start by creating a simple 2x1 table with just one image in one column and a <span id="txtMsg"></span> in the other column
- Attach an onMouseOver event to the image
- Set up a JavaScript function
- Place an alert("here") call into function to make sure it gets called and your setup is correct
- Change the text in the <span> to something (doesn't matter what) and see if it works
- Attach an onMouseOut event to the image
- Set up a second JavaScript function and check with alert() like above that it gets called
- In the second function, blank out the text (set the text in innerHTML for the <span> to "")
- Once you have that working, expand the table to six images
- Update your functions -- use parameters to see which image is being selected/hovered over
** Use Brackets in case you want to try out a different editor
Hints
- you can use any images of destinations around Cape Cod that you wish; it is best to use a URL to the image or to host the image on an image hosting web site (flickr, imgur, AwardSpace) as Weebly has no convenient way to upload and manage files
- AwardSpace includes functionality to avoid image spamming, so if your image URLs are not working from within Weebly you may want to move your images to www.imgur.com and use those URLs in your <img> source links
- if the URLs to your images are very long, shorten them with a URL shortening service such as bit.ly or goo.gl; it will make your code easier to read and modify
- make sure that your JavaScript function is actually getting called by inserting an alert() as the first line; if the alert comes up then you know the function is getting called
- check your IDs of the <img> tags; did you spell them all correctly?
- use function parameters to identify which image was hovered over
- you will likely need two functions (although it can be done in one, but it's much harder)
- you may choose to use global variables for the text or an array of text
- the JavaScript functionality often only works when your Weebly site is published; do your development in the SquareFree HTML editor
- check the spelling of getElementById -- make sure it's a lower case "d" for Id at the end; sometimes it's mispelled as getElementByID ()
- do you have braces? { and }?
What to Submit
Submit the URL to your Weebly BoatVentures website.
Resources Required & Notes
Total Number of Earnable Points: 100 Points
Approximate Time to Complete: 1.5 Hours
Due Date: see Syllabus or Blackboard
Approximate Time to Complete: 1.5 Hours
Due Date: see Syllabus or Blackboard