Description
I need help with doing the html assignment
Unformatted Attachment Preview
CSCE 102 Lab 6
Functions, Image Rollovers, Tables and Thumbnails
In this lab you will be creating two web pages: lab6axx.html and lab6bxx.html (where
the xx are your initials).
Creating lab6axx.html:
•
•
•
•
Include your name, section number and today’s date in an HTML comment in the head of the
document.
Include your name and section number at the top of the page using the heading tags
Use an internal CSS to set styles including the background color.
You are to find and download your own images. Use break tags where necessary.
Your first rollover: We are rolling over the image to change the image to another image.
•
•
•
•
Put your image in the page. This should be a picture of you.
Use onmouseover to change your image to the image of a (non-spider) insect
Use onmouseout to change the image back to your image.
You will use this to implement this rollover.
Your second rollover:
•
•
•
•
•
Below the image used in your first rollover load two images of cute animals (your choice and
definition of cute). Both the images must be different.
Use a function to make it look like the images swap positions when the mouse is over either image.
(Call the same function in the onmouseover event handler for both images. The function will load
images in the appropriate positions.)
Use another function to swap the images back to their original positions when the mouse is not over
either image. (Call another function in the onmouseout event handler for both images. This function
will load both of the original images.)
Make sure you give each image tag an id and use document.getElementById in your function to
change the src attribute of the image tags.
The onmouseover for reach of these two image tags should call the same function. The onmouseout
for each of these two image tags should also call the same (but different from the one called in the
onmmouseover) function.
Your third rollover:
•
•
•
•
•
•
•
Load three images of vehicles. Again, use three different images.
When you move the mouse over the first car, have the third image change to a truck.
When you move the mouse off of the first image, have the third image change back to the original
vehicle.
When you move the mouse over the second car, have the first image change to a train.
When you move the mouse off of the second image, have the first image change back to the original
vehicle.
When you move the mouse over the third image, have the first and second images change to images
of motorcycles.
When you move the mouse off of the third image have the first image change back to the original
vehicle and the second image change to an image of your favorite car.
Creating lab6bxx.html:
•
Include your name, section number and today’s date in an HTML comment in the head of the
document.
•
•
•
•
•
A table with six thumbnails of images of your choice. You should have some kind of theme for the
images you select. Include a row at the top that spans all your columns as a header for the table.
Include a link in a cell below each thumbnail to link to where you found the image.
Use an internal style sheet to give the table borders and styles.
Center the table within the page using methods we have used in earlier labs.
If you wish, instead of using thumbnails in your table, you may create an image gallery (like from one
of the example videos for this lab). Either a table of thumbnails or an image gallery are acceptable for
this lab, I’d just like to give you some creative options if possible. If you go with the image gallery,
please use at least six images.
Useful Links
JavaScript Functions:
JavaScript Introduction:
JavaScript Event Handlers
https://www.w3schools.com/js/js_functions.asp
https://www.w3schools.com/js/js_intro.asp
https://www.w3schools.com/js/js_events.asp
Reminders:
•
•
•
•
•
DO NOT COPY AND PASTE YOUR PARAGRAPHS. Sorry for the all caps, but make sure these are
in your own words, not copy and pasted from Wikipedia or somewhere. Plagiarism is a violation
of the USC honor code.
Your external style sheet should only contain CSS rules. No HTML comments, head tag, etc.
A paragraph is not three very short sentences. These should be well written paragraphs that are
long enough to cover whatever topic they are to address.
HTML5 pages must include:
▪ All tags listed in the HTML5 template in your text.
▪ An HTML comment immediately following the opening tag that includes, your name,
email address and section number
▪ An appropriate title using the tag
Don’t forget to include all image files in your zip file when you submit your lab
To submit this lab, you will need create a zip file containing all the files for this lab, including images you
use on your page (see instructions on my web site), then login to blackboard (blackboard.sc.edu), and
upload the zip file for this lab using the assignment manager (also see instructions on my web site).
If you have any questions or problems, please email.
DO NOT wait till the last minute to upload your files.
Don’t forget to save backup copies of all your work.
Academic Honesty
1.
2.
3.
4.
5.
6.
The work you turn in is to be your work, not copied from someone else, from the web, or
generated by an HTML editor.
Never allow anyone access to your files.
Never give anyone your password.
Never share your flash drive or email your files to anyone.
Never give anyone a printed copy of your file or an electronic copy.
Never allow anyone to copy your work.
Purchase answer to see full
attachment
