Do an Image Rollover with CSS Project

Assignment 9A9 – Do an image rollover with CSS
In this exercise, you’ll do an image rollover by using background images. When you’re done, the
page will look as shown below before and after the rollover.
1. Open these HTML and CSS files, and run the HTML file:
sampson.html
rollovers.css
Note that it displays the image for Scott Sampson (sampson_dinosaur.jpg), as shown above.
2. Modify the HTML and CSS as shown so the image rolls over to the image for
Andrew Ross Sorkin (sorkin_desk260.jpg) when the user hovers the mouse over the
first image.
3. To make this work, set the height and width properties for the element to 260px.
Because the images aren’t quite that size, you’ll also need to set the backgroundrepeat property to no-repeat.
Assignment 9
Previous Next
Instructions
Assignment 9: Image Rollover
You will adjust your files based on the A9_Instructions document
attached.
When you are ready, rename the A9_YourFirstName_YourLastName
using your first and last name so that when you zip your folder for
submission, it will identify it as yours upon the instructor downloading it.
Grading is assessed on proper file structure utilizing only the files
referenced in this assignment, proper use of HTML and CSS as defined in
the instructions, proper utilization of zipped file for submission, and
proper naming convention used for zipped submission file.
Attachments
A9_Start Files.zip
(145.17 KB)
A9_Instructions.pdf
(
Assignment 10
A10 – Enhance a table
In this exercise, you’ll start from a table that looks like this:
Then, you’ll expand and format the table so it looks like the one that follows.
1. Open this HTML file and run it:
employee_table.html
Note that this HTML file uses embedded CSS in the head section to do the formatting.
2. Expand the HTML so the table has the caption and data shown in the second table
above.
3. Expand the CSS so it does the formatting shown in the second table above.
4. If you used classes to do the alignment and apply the colors to the cells of the table,
try using pseudo-classes to get the same results.
Assignment 10
Previous Next
Instructions
Assignment 10: Enhanced Table
You will adjust your files based on the A10_Instructions document
attached.
When you are ready, rename the A10_YourFirstName_YourLastName
using your first and last name so that when you zip your folder for
submission, it will identify it as yours upon the instructor downloading it.
Grading is assessed on proper file structure utilizing only the files
referenced in this assignment, proper use of HTML and CSS as defined in
the instructions, proper utilization of zipped file for submission, and
proper naming convention used for zipped submission file.
Attachments
A10_Instructions.pdf
(117.56 KB)
A10_Start Files.zip
(1.66 KB)
Assignment 11
1 – Create a form
In this exercise, you’ll complete a form so it looks as shown below.
1. Open this HTML file and run it to see that it already provides the first two headings,
the first three fields, the last heading, and the two buttons:
forms.html
2. Modify the attributes for the form so it uses the “get” method and submits the form to
the file named survey_data.html. Then, test the submission of the completed form.
This should display a page that shows the submitted data.
3. Add the autofocus attribute to the first field and the required attribute to all three of
the fields. Then, test to make sure the data validation works.
4. Add the “Geographic information” heading and fields. These fields should also be
required and they should have the placeholders that are shown above. To validate the
state and zip code fields with regular expressions, you can use these patterns:
[A-Za-Z]{2} and \d{5}
5. Add the “How did you hear about us” heading and checkbox fields. Use labels to
provide for user accessibility as shown in figure 11-8.
6. Enhance the CSS in the HTML file so the form looks like the one above. In
particular, you’ll need to change the width of the checkboxes so they will align right,
and you should remove the box shadow from required and invalid fields so they
won’t have red shadows when displayed in Firefox.
7. Do a final test to make sure everything works as it should.
Assignment 9
Previous Next
Instructions
Assignment 9: Image Rollover
You will adjust your files based on the
A9_Instructions document attached.
When you are ready, rename the
A9_YourFirstName_YourLastName using your
first and last name so that when you zip your
folder for submission, it will identify it as yours
upon the instructor downloading it.
Grading is assessed on proper file structure
utilizing only the files referenced in this
assignment, proper use of HTML and CSS as
defined in the instructions, proper utilization of
zipped file for submission, and proper naming
convention used for zipped submission file.
Attachments
A9_Start Files.zip
(145.17 KB)
A9_Instructions.pdf
Assignment 10
Previous Next
Instructions
Assignment 10: Enhanced Table
You will adjust your files based on the
A10_Instructions document attached.
When you are ready, rename the
A10_YourFirstName_YourLastName using your
first and last name so that when you zip your
folder for submission, it will identify it as yours
upon the instructor downloading it.
Grading is assessed on proper file structure
utilizing only the files referenced in this
assignment, proper use of HTML and CSS as
defined in the instructions, proper utilization of
zipped file for submission, and proper naming
convention used for zipped submission file.
Attachments
A10_Instructions.pdf
(117.56 KB)
A10_Start Files.zip
(1.66 KB)
Assignment 11
Previous Next
Instructions
Assignment 11: Creating a Form
You will adjust your files based on the
A11_Instructions document attached.
When you are ready, rename the
A11_YourFirstName_YourLastName using your
first and last name so that when you zip your
folder for submission, it will identify it as yours
upon the instructor downloading it.
Grading is assessed on proper file structure
utilizing only the files referenced in this
assignment, proper use of HTML and CSS as
defined in the instructions, proper utilization of
zipped file for submission, and proper naming
convention used for zipped submission file.
Attachments
A11_Instructions.pdf
(93.76 KB)
A11_Student_Files.zip
(3.09 KB)
Assignment 12
Instructions
Assignment 12: Homepage Printing
Format
You will adjust your files based on the
A12_Instructions document attached.
When you are ready, rename the
A12_YourFirstName_YourLastName using your
first and last name so that when you zip your
folder for submission, it will identify it as yours
upon the instructor downloading it.
Grading is assessed on proper file structure
utilizing only the files referenced in this
assignment, proper use of HTML and CSS as
defined in the instructions, proper utilization of
zipped file for submission, and proper naming
convention used for zipped submission file.
Attachments
A12_Instructions.pdf
(212.37 KB)
A12_Start Files.zip
(130.21 KB)
Assignment 9
A9 – Do an image rollover with CSS
In this exercise, you’ll do an image rollover by using background images. When you’re done, the
page will look as shown below before and after the rollover.
1. Open these HTML and CSS files, and run the HTML file:
sampson.html
rollovers.css
Note that it displays the image for Scott Sampson (sampson_dinosaur.jpg), as shown above.
2. Modify the HTML and CSS as shown so the image rolls over to the image for
Andrew Ross Sorkin (sorkin_desk260.jpg) when the user hovers the mouse over the
first image.
3. To make this work, set the height and width properties for the element to 260px.
Because the images aren’t quite that size, you’ll also need to set the backgroundrepeat property to no-repeat.
Assignment 10
A10 – Enhance a table
In this exercise, you’ll start from a table that looks like this:
Then, you’ll expand and format the table so it looks like the one that follows.
1. Open this HTML file and run it:
employee_table.html
Note that this HTML file uses embedded CSS in the head section to do the formatting.
2. Expand the HTML so the table has the caption and data shown in the second table
above.
3. Expand the CSS so it does the formatting shown in the second table above.
4. If you used classes to do the alignment and apply the colors to the cells of the table,
try using pseudo-classes to get the same results.
Assignment 11
1 – Create a form
In this exercise, you’ll complete a form so it looks as shown below.
1. Open this HTML file and run it to see that it already provides the first two headings,
the first three fields, the last heading, and the two buttons:
forms.html
2. Modify the attributes for the form so it uses the “get” method and submits the form to
the file named survey_data.html. Then, test the submission of the completed form.
This should display a page that shows the submitted data.
3. Add the autofocus attribute to the first field and the required attribute to all three of
the fields. Then, test to make sure the data validation works.
4. Add the “Geographic information” heading and fields. These fields should also be
required and they should have the placeholders that are shown above. To validate the
state and zip code fields with regular expressions, you can use these patterns:
[A-Za-Z]{2} and \d{5}
5. Add the “How did you hear about us” heading and checkbox fields. Use labels to
provide for user accessibility as shown in figure 11-8.
6. Enhance the CSS in the HTML file so the form looks like the one above. In
particular, you’ll need to change the width of the checkboxes so they will align right,
and you should remove the box shadow from required and invalid fields so they
won’t have red shadows when displayed in Firefox.
7. Do a final test to make sure everything works as it should.
Assignment 12
1 – Format the home page for printing
In this exercise, you’ll format the home page of the Town Hall website for printing.
1. Open the HTML file for this page and the CSS file for printing it:
index.html
home_print.css
Note that the CSS file is a copy of the main.css file that is used to format the index page for
screens.
2. In the HTML file, add a link element for the home_print.css file and be sure to
specify that the medium is “print”.
3. In the CSS file, delete all of the rule sets and rules that you don’t need to override,
and code the rule sets or rules that will stop the display of the navigation menu and
the images in the sidebar.
4. Increase the font size in the body element to 100% so the page will be easier to read
when it’s printed.
5. Modify or add styles to the home_print.css file until the printed page looks like the
one above.
A13 – Use a CSS3 transition and transform
In this exercise, you’ll use a transition and a transform to rotate elements when the mouse hovers
over them as shown below. Estimated time: 10 to 15 minutes.
1. Open these HTML and CSS files, and run the HTML file:
sampson.html
speaker.css
2. Add CSS for a transform that will rotate the list items in the sidebar horizontally 360
degrees when the mouse hovers over them.
3. Add CSS for a transition that will cause the transform to last for 3 seconds.
A14 – Use CSS3 animation
In this exercise, you’ll animate the image in the page header so it appears to bounce from left to
right. Estimated time: 10 to 15 minutes.
1. Open these HTML and CSS files, and run the HTML file:
sampson.html
speaker.css
2. Add CSS to the image in the header that will use an animation named “bounce” with
a duration of half a second that will repeat eight times, use the ease-in timing
function, and alternate direction.
3. Add an @keyframes selector rule that defines the keyframes for the animation. In the
from group, set the left and right padding so the animation starts at the image’s
current position on the page. In the to group, set the left and right padding so the
image moves to the right 20 pixels.