Images
Other Image Uses

Discussion

• Other Image Uses
  • Images used as submit buttons
    • Use the input element
      • The type attribute is image
      • The src attribute references the url of the image
      • The alt tag describes the image for software readers
  • Images used as links
    • Use an image between the open and close a tags to allow the user to click on the image.
    • You may use both an image and text to allow the user to click on either the image or the text.
      (you might use the br tag to place the text below the image)
  • Rollovers or Rollover Images
    • Images that change when the mouse hovers over the image.
    • Click on PineKnollsRollover.html
    • Move your mouse over and out of the image to see the smaller and larger images.
    • Right click on the page and View Source.
    • Resize the window of the source code to the right half of the screen.
    • The a tag used in PineKnollProperties.html is removed.
    • The img tag now has two event handlers onmouseover and onmouseout.
    • If you want the image to change back and forth you must use both event handlers.
    • Since there is no longer an a tag, the tests for determining which image is displayed relies on a Boolean variable smallImage.
      • A Boolean variable acts like a toggle switch. It is true or false.
  • Image Maps
    • An image map uses an image for navigation. See W3schools Image Map Tutorial.
    • To create an image map, the image is divided into areas called hot zones. When the hot zone is clicked (or hovered) the associated URL with the hot zone is linked.
    • Image link syntax
      <a href="TexasMap.jpg" >
      <img src="TexasMap.jpg" height="400" width="400"
      alt="Texas Map, used with permission &copy; AAA Cooper Transportation" /></a>
      

Practice

• Create a page that uses images as described above.
• Make any corrections for any page that does not validate or display correctly.