ECT 270: HTML Part 2

1
ECT 270 HTML Part 2
Adding images image maps to a web page
2
Inserting a Graphic

• Images can be displayed in two ways as inline
  images or as external images.
  
• an inline image displays directly on the Web page
  and is displayed when the page is accessed by a
  user
  
• an inline image can be placed on a separate line
  in your HTML code, or it can be placed directly
  within a line of text
  
• inline images should be in one of two file
  formats GIF (Graphics Interchange Format) or
  JPEG (Joint Photographic Experts Group)

3
Inserting a Graphic Continued

• an external image is not displayed with the Web
  page, the browser must have a file viewer, which
  is a separate program that the browser launches
  when it encounters an external image file
• external images are represented by an icon that a
  user clicks to view the image
  
• external images are not limited to GIF or JPEG
  formats

4
Image file formats

• The file formats most commonly used for images on
  the Web are
  
• GIF (Graphic Interchange Format)
• To display clip art containing
• To create animated graphics
• To use transparent colors ? Example
• JPG (Joint Photographic Expert Group)
• To display photographs
• To use images containing 256 colors
• To reduce the size of the image through file
  compression

5
Image tag

• Inline image a picture file that is referenced
  in the HTML code and is loaded with the HTML
  file.
  
• The image file resides on the web server (shrike)
  and has a 644 permission.
  
• The source attribute
  (SRC) refers to the name and location of the
  image file relatively to the HTML file itself.
  
• If you want to retrieve an image from a different
  directory, you can add path information to the
  file name
  

6
More image tag attributes

• HEIGHT specifies the height of the image in
  pixels
  
• WIDTH specifies the width of the image in
  pixels
  
• BORDER determines the size of the border
• ALT specifies the text displayed on-screen when
  the image cannot be loaded
  
• ALIGN enables text to flow around the image at
  the TOP, MIDDLE, or BOTTOM of the image. Also
  used to flush the image to the RIGHT or LEFT of
  the screen

7
Flowing Text

• Use the align attribute to make text flow
  alongside an image
  
• positions the image on the left side of the page
  and allows text to run down its right side
  
• To center an image, use
• imagemlk.html

8

• HTML page on M.L. King
• Martin Luther King, Jr.
  
  
• height400
  
• I have a dream that one day this nation will rise
  up and live out the true meaning of its creed
  "We hold these truths to be self-evident that
  all men are created equal." I have a dream
  today.
• I have a dream that one day the state of
  Alabama, whose governor's lips are presently
  dripping with the words of interposition and
  nullification, will be transformed into a
  ..

9
Bandwidth Limitations

• Image files consume more bandwidth than text
  files
  
• Users who access the Internet via telephone lines
  will have to wait for image files that are 100KB
  or larger
  
• Whenever possible, use image files no larger than
  30-40KB
  

10
Battling Bandwidth Limitations

• Always specify height and width attributes for
  all your images so the browser can work around
  each image while it is downloading.
  
• TIP To find an image dimension open it using a
  Web browser, then select Properties on the File
  Menu.
  
• Dont put any large images at the top of a Web
  page
  
• Use interlaced GIFs and progressive JPGs.
• Several shareware graphic programs save GIF or
  JPG files in convenient formats Paint Shop Pro
  or GIF Wizard
  
• Use the 1x1 image trick (with caution)
• Use thumbnails reduced versions of your image

11
Scaling Images

• Rescale the image by changing its WIDTH and
  HEIGHT attributes.
  
• Preserve the aspect ratio (height-to-width ratio)
  otherwise the image gets distorted. Divide or
  multiple the dimensions by the same factor.
  
• Scaling down an image DOES NOT reduce its
  bandwidth requirements. To reduce the file size,
  you need to compress the image.
  

12
Example of image scaling

• Image Scaling
• Scaling.html

13
Clickable image hyperlinks

• Anchors can be used to hyperlink images instead
  of text.
  
• photo
  
• Whenever the mouse enters the clickable region,
  it will display the contents of the ALT
  attribute.
  
• By default, clickable images have blue borders
• No blue border? Set the BORDER attribute inside
  the IMG tag to 0.
  
• photo border0

14
Example
Images body Hyperlinked picture //www.spoletofestival.it" s/spoleto.jpg" width"600" height"356"
alt"Spoleto, Italy"
HTMImages
15
Image map

• Designate certain sections of an image as
  hotspots. Metra System Criminal justice
  Mount Laguna observatory
  
• Each hotspot will hyperlink to a different page
• Create a map of the image specifying the shape of
  each hotspot and the coordinates of the
  vertices.
  
• The name of the map to be used is then referenced
  in the tag.
  

16
Image map syntax

• hrefurl targetwindow
  
• (1 area for each hotspot in the image map)

• SHAPE Rectangle, Circle, Polygon
• COORDS The x and y coordinates of the crucial
  points of each shape. The coordinates
  are relative to the top left corner of the
  image. The x axis extends horizontally, the y
  axis extends vertically
• HREF the target for the link on that hotspot

17
SHAPES

• RECT Creates a rectangular spot
• Coord. are top/left and bottom/right vertex
• CIRCLE Creates a circular spot
• Coord. are the center and the radius
• POLY Creates a hotspot connecting the points
  coordinates
  
• Coord. are the vertex coords x1,y1, x2,y2,
• 1st vertex 2nd vertex

18
Shapes and coordinates
X153 x2162 x273 y183 y2180
y131 r36
HTMimagemap
19
The ISMAP Trick

• Using Netscape or IE, you can find the x-y
  coordinates for any spot
  
• Set up an IMG tag with an ISMAP attribute
• ismap
  
• Display the HTML file using a browser
• Place the cursor inside the image and look at the
  status message at the bottom of the browser
  window. You should see the coordinates of the
  cursor position.
• An alternative method is to use MapEdit (look in
  the CD attached to the book or
  http//www.boutell.com/mapedit/)