CSCE 102 Lab 6 — Image Maps

General information

  • Always bring your book and lecture notes to lab.
  • Use clean indentation so your code will be easy for you to read and also easy for your instructor to read.
  • Include the closing tags when you enter the opening tags so you will not forget them.
  • Always maintain backup copies of your work. Always work on your x drive and copy your work to your flash drive at the end of lab.
  • Never share your code, password, or flash drive with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work, not copied from the web of from someone else.

Lab6axx.html- Due at the end of class

  • Insert an h1 that says: USC Horseshoe.
  • Below the h1 insert an image that is a map of the USC Horseshoe.
  • Make that image an image map.
  • Usethreelinks (area elements) as described below.Use the three different shapes for the area elements (circle, poly, rect).
  • Insert two links from two buildingson the Horseshoe map, to images that you have downloaded to your x drive, of the particular buildings. (You will click on a building on the Horseshoe map and open an image of that building,)
  • In each of thosetwo area tags insert an onmouseover that will change the text in the h1 to contain the name of the building and an onmouseout that will change it back to:USC Horseshoe.
  • Insert a link fromthe center of the Horseshoe, where the Maxcy Monument is located,to the University’s web page.

Note: The areas cannot overlap.Image maps are in your web Design textbook, pages 164-165.

To find the coordinates put the image in Paint and move the mouse to the place you want and look at the bottom left corner of the screen to see the x and y coordinates. If you want the img to be a different size, resize it in paint and save it. Do not resize the image in the image element. You need it to be the size that it was when you found the coordinates so that the link will be in the right spot.

Save all images used in the Lab-6A and 6B into your All_Images folder before using them. Do not link to an image on the web (The image must be on your X drive).

Lab6bxx.html - Due next week

  • Be Creative.
  • Do not share your work. Your code should not look like anyone else’s.
  • Create a web page that contains two images.(Do Not usethe USC Horseshoe or a map of USC.)
  • Add headings and a paragraph.
  • Make thefirst image an image map with 3 links (area elements).
  • Use all three shapes. Use care tonot have them overlap. Remember not to resize your image.
  • Make the second image an image map with two links.
  • Add style to the page
  • Go to All_Index and insert a link to lab6axx.html and lab6bxx.html