Explore HTML and CSS Image Maps Template – Day 9a


  • Goal
    • Understand how to create a web page with a central image that has links with image maps
  • Product
    • Splash page with image map links
      • Main box with image
      • Navigation with links to your class social media tools
      • Quote  / Name box
  • Examples
  • Steps
    1. Export your Illustrator prototype as a .jpg or .png
    2. Upload  finished prototype .jpg or .png image to your Flickr account
    3. Download sample HTML and CSS file from this page
    4. Embed your image code into the HTML and CSS code
    5. Adjust the main DIV and image size to the size of your image
    6. Create the image maps over the social media icons linking them to your school social media sites
    7. Take a screenshot of the finished work
  • Tools
  • Resources

Remember to Your Comment Code

  • Use comments to identify DIV’s in the CSS and HTML
  • /* This is a sample of a comment in CSS */
  • <!– This is an example of a HTML comment. –>

Sample Commented Code