home -- outline -- lectures -- assignments -- discussion -- tips -- links --



Intro to the Web: Friday, Jan 23


Review: Using Images


Image Tag
  • < img src=" http://www.cs.uchicago.edu/~hunicke/cookies.gif " >

Images as Links
  • < a href=" http://www.cs.uchicago.edu/~hunicke/" >
    < img src=" http://www.cs.uchicago.edu/~hunicke/cookies.gif " > < /a >

  • < a href=" http://www.cs.uchicago.edu/~hunicke/" >
    < img src=" http://www.cs.uchicago.edu/~hunicke/cookies.gif BORDER=NO " > < /a >


Images: Attributes
  • Each Image requires a separate HTTP connection.
  • Giving HEIGHT and WIDTH allows text to be displayed in the correct location before the image downloads.
    • (can also be used to fill flood regions, by tiling the SRC image.)
  • Use HSPACE and VSPACE to give your image breathing space.
  • Use BORDER = 0 for transparent GIFs.
  • HEIGHT and WIDTH
  • Remember <BR CLEAR = left | right | all>.
  • Use progressive formats.

Review: Clilent-Side Image Maps
  • Combines Images and HyperLinks.
  • Allows you to Associate Regions in an Image with HyperLinks.
  • Can be server-side (CGI powered) or client-side (Browser powered).


    • client-side image maps can be created by anyone (server-side requires special access)

      • <IMG USEMAP=#FragmentName SRC=URL ...>
      • USEMAP specifies client-side image map

      • <MAP NAME=#FragmentName> List of Areas </MAP>
      • <AREA COORDS=["#,#,#..." | "%,%,%.."] HREF=URL [SHAPE= rect | circle | poly] [NOHREF] [ALT="Alternate Text"]>

    <MAP> Example
      <map name="navbarmap">
      <area coords="0,0,49,49" href="http://www.somewhere.com/index.html " shape="RECT" >
      <area coords="50,0,99,49" href="http://www.somewhere.com/index.html " shape="RECT" >
      <area coords="100,0,149,49" href="http://www.somewhere.com/index.html " shape="RECT" >
      <area coords="150,0,199,49" href="http://www.somewhere.com/index.html " shape="RECT" >
      ...
      </map>

      <img src="/img/frontpage/sw_bar7a-sz.gif" border="0" USEMAP="#navbarmap" ISMAP align="left">
      Example:

      High-quality JPEG map:



      Low-quality JPEG map:



      GIF map:




Designing with Image Maps
  • Huge images take up space and are slow: same with huge image maps.
  • Changing an image map can be a pain: use buttons for dynamic pages
  • Tables or frames give you the same idea of "clickable area" without the mess.

Server-Side Image Maps

  • <A HREF=MAP-URL><IMG ISMAP SRC=URL ...></A>
  • ISMAP specifies client-side image map
  • MAP-URL gives the URL of map file that specifies regions and where they link to
  • NCSA, CERN formats for map file.
  • Use client-side maps instead!

Tips and Tricks: Images

Thumbnail vs. Resize:
  • Sometimes a picture is just too big to display
  • Resizing the graphic downloads entire image, then re-displays it.
  • Shrink it and then use Image as Link technique to link to large pictures
  • Especially good for series of changed images, selection of objects or views.
    • tours
    • catalog
    • portfolio

Single Pixel Gif Multimedia

Sections 5.7,5.8 in HTML The Definitive Guide.

  • Sound, video and 3D graphics can be included with Web pages, but formats in many cases not yet standardized.
  • Can employ helper applications to process data, e.g. (on Mac) Sparkle to view MPEG videos, JPEGview for images (incl. TIFF), SoundApp (e.g. AIFF format).

Helper Applications
  • Browser's identify format of file by MIME (Multipurpose Internet Mail Extension) type given by server, or by the suffix in the file's name.
  • File is fed to helper application after download

Plug-ins
  • Can take the place of helper applications, allow the browser to interpret the data internally.

Helper Applications and Plug-ins
Format MIME type Suffix Handled by
TIFF image/tiff tif, tiff JPEGview
MPEG video/mpeg mpg,mpeg,mpe Sparkle
AIFF audio/aiff aiff SoundApp
AIFF audio/aiff aiff LiveAudio
MIDI audio/x-midi mid LiveAudio
VDP video/x-vosaic vos Vosaic

Audio Formats
  • MIDI -- describes sound as for a synthesizer, in terms of instruments and notes (very compact and high quality).
  • RealAudio -- streaming audio, allows broadcast of live audio, no waiting.

Video Formats
  • MPEG, Quicktime -- video.
  • VDP (VOSAIC) -- streaming video (will be used on UCSCO's video server on campus).

Other Formats
  • PDF (Portable Document Format -- Adobe Acrobat) Page description language, based on PostScript, extended for electronic documents.
    • Easy conversion from PostScript documents.
    • Precised control of layout.
    • Prints nicely.

3D Graphics Formats?
  • VRML (3DMF) -- based on Silicon Graphic's OpenGL, not widely supported yet.
Images and Design: Examples