Images
Thumbnail

Discussion

• Thumbnails
  • When a large image takes a long time to load, you can choose to load a smaller image and let the user choose to open the larger image.
  • Click on PineKnollProperties.html
  • Click on the link and switch back and forth between 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.
  • Look at the attributes of the a tag in the body.
    • The href is assigned a null string because it is not intended to go to a different page or a different place on the page.
    • The id is assigned the value imageLink and will be referenced.
    • The onclick event handler calls a function changeSize().
    • Anywhere you put an onclick event with a javascript call, if you add return false then the default behavior (what would have happened without the onclick event) will be disregarded. Here the href is disregarded.
  • Look at the attributes of the img tag in the body.
    • The src is assigned the image of the small image.
    • The id is assigned the value housePhoto and will be referenced.
    • The height and width designate the size of the image.
    • The alt describes the image for software readers.
  • Look at the function changeSize()
    • The getElementById() method returns a reference to the object specified by argument in the parameter list.
    • In changeSize()
      • The variable picLink references the element with the id "imageLink"
        (the a tag in the body)
      • The variable housePic references the element with the id "housePhoto"
        (the img tag in the body)
      • innerHTML property (does not work in all browsers) allows you to set or return the text of a link.
      • The if statement tests to see if the text of the link named "imageLink" is equal to "View larger image"
      • The first time the page renders, the text is equal to "View larger image" so the first block of code is executed.
      • When an else is used in conjunction of an if statement, control of the code transfer to the block of code following the else.
      • The statements within both the true block and the false block
        • Sets the text of the link.
        • assigns a new image to the src attribute
        • changes the height of the image
        • changes the width of the image
  • Image sizes
    • If you are using the actual size of the image for both images, you do not need to set the height and width attributes.
    • You can use the same image with different height and widths, but it is not recommended to enlarge an image greater than the original image.

Practice

• Create a page to display a large and a small image.
• Make any corrections for any page that does not validate or display correctly.