3.1 - School of Computing
Download
Report
Transcript 3.1 - School of Computing
Images & Image Maps
16th February
Images & Image Maps
Web authors can add icons, logos and high impact
images to their pages
Images enhance web pages
Important issues to consider are image complexity and
file-size
General rules to be followed:
Use images to enhance page layout and content
Keep image complexity low
Use thumbnail versions of images to reduce download time
Use icons and logos to distinguish the web page
General Information
Computer screen is divided horizontally and
vertically into pixels
Example: a monitor with a resolution of 800x600
has 800 and 600 pixels in the horizontal and
vertical directions respectively
Types of Graphics
Graphic types commonly used on Web
pages:
GIF
JPG
PNG
4
GIF
Graphics Interchange Format
Best used for line art and logos
Maximum of 256 colors
One colour can be configured as transparent
Can be animated
Uses lossless compression
Can be interlaced
5
JPEG
Joint Photographic Experts Group
Best used for photographs
Up to 16.7 million colors
Use lossy compression
Cannot be animated
Cannot be made
transparent
Progressive JPEG – similar to interlaced display
6
PNG
Portable Network Graphic
Support millions of colors
Support multiple levels of transparency
(but browsers do not -so limit to one transparent color for Web display)
Support interlacing
Use lossless compression
Combines the best of GIF & JPEG
Browser support is growing
7
Images
Images take a long time to load so JPEG and GIF
formats allow progressive loading of images
Progressive JPEG
Interlaced GIF
Images are loaded with gradual resolution
Transparency allows the viewer to see the background
of a Web page through the part of the image that is
transparent
Image Scaling
Users can scale images up or down by using
an image program or XHTML tags
Why would it not be recommended to scale
images up?
Resolution will worsen
Staircase effect (jaggedness of the image
boundaries)
XHTML Image Element
Configures graphics on a Web page
<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />
src Attribute
alt Attribute
Configures alternate text content (description)
height Attribute
File name of the graphic
Height of the graphic in pixels
width Attribute
Width of the graphic in pixels
10
XHTML <img /> Alignment
XHTML More <img /> Attributes
Adding Vertical Space
vspace Attribute
Adding Horizontal Space
hspace Attribute
A more modern approach is to use the CSS
padding property
Accessibility & Images
Required:
Configure the alt attribute
Alternate text content to convey the meaning/intent of the
image
NOT the file name of the image
Use alt=“” for purely decorative images
Optional:
Configure the longdesc attribute
Used when meaning cannot be conveyed in the alt text
Usually a URL to a Web page with text
Image Links
To create an image link use an anchor
element to contain an image element
<a href="index.html"><img src="home.gif"
height="19" width="85" alt="Home" /></a>
Home
14
Using Images
A web page that uses an image – School of Computing
Homepage (http://www.comp.dit.ie)
<a href="http://www.comp.dit.ie/cgames/"> <img
src="images/cgames.gif" alt="cgames"
name="cgames06" width="175" height="66"
border="0" id="cgames06"> </a>
Choosing Names for Image Files
Use all lowercase letters
Do not use punctuation symbols and spaces
Do not change the file extensions
(should be .gif, .jpg, .jpeg, or .png)
Keep your file names short but descriptive
i1.gif is probably too short
myimagewithmydogonmybirthday.gif is too long
dogbday.gif may be just about right
Organizing
Your Site
• Place images in
their own folder
• Code the path to
the file in the src
atttribute
<img src=“images/home.gif” alt=“Home”
height=“100” width=“200”/>
17
Other Image Topics
Thumbnail Images
Image Maps
Sources for Graphics
Guidelines for Using Images
Accessibility
Thumbnail Image
A small image configured to link to a
larger version of that image.
19
Image Maps
An image map is defined as a single image
that links to multiple URLs or XHTML
documents
They allow us to link different parts of an
image to different web pages
Image maps are both client and server-side
based
Examples are roadmaps and layouts
Image Maps (example)
Triangle.html
Rectangle.html
Circle.html
mailto:....@....
Types of Image Maps
There are 2 types of image maps :
Server side
Requires client-server communication twice
Server side maps existed before the client maps
Client side
Client resolves the click locally and then requests
the web page
Web authors should use client-side image maps
in their web pages
Creating Image Maps
Create the image
Define the virtual shapes of the map
Configure the image map
Create the XHTML files (URLs)
Creating Image Maps
XHTML provides 3 virtual shapes
Rectangle
Polygon
Circle
Each of the virtual shapes can be defined by
a set of points
The image software can be used to find the
co-ordinates of the points used to define the
virtual shape
Image Maps
<map> element
Defines the map
<area> element
Defines a specific area on a map
Can be set to a rectangle, circle, or polygon
href Attribute
shape Attribute
coords Attribute
25
Sample
Image Map
<map name="boat" id="boat">
<area href="http://boat.com" shape="rect"
coords="24, 188, 339, 283" alt=“fishing boat" />
</map>
<img src="boat.jpg" usemap="#boat" alt=“Lake Michigan" width="416"
height="350" />
Write the XHTML code for the image
map in the next slide
Rectangle, coords are 10,25,90,60
Polygon, coords are 100,60,210,60,150,10
Circle coords are 252,40,35
Use the 3 tags <img>, <map> and <area>
Write the XHTML code for this
Restaurant Image Map
Appetiser as
rectangle
Meals as
triangle
Pizza as
circle
Using Image Maps
The <img> tag is used to define an image
The <area> tag is used to define one virtual shape
at a time
<img src="foodMenu.jpg" usemap="#menuMap" />
<map name="menuMap“ id=“menuMap“>
<area href="http://www.burgerking.com" alt="Appetizers"
shape="rect" coords="10,25,90,60" />
<area href="http://www.legalseafood.com" alt="Meals"
shape="poly" coords="100,60,210,60,150,10" />
<area href="http://www.pizzahut.com" alt="Pizza" shape="circle"
coords="252,40,35" />
</map>
Sources for Graphics
Create them yourself using a graphics application:
Adobe Photoshop
Adobe Fireworks
Google’s Picasa (http://picasa.google.com/)
Download graphics from a free site
Purchase/download professional-quality graphics
Purchase a graphics collection on a CD
Take digital photographs
Scan your photographs
Scan your drawings
Hire a graphic designer to create graphics
30
Guidelines
for
Using
Images
Consider image load time
Reuse images
Consider image file size with image quality
Screen Resolution
Specify dimensions
Gamma – brightness & contrast
31
Images and Accessibility
Don't rely on color alone.
Some visitors may have colour perception deficiencies.
Use high contrast between background and text color.
Provide a text equivalent for non-text elements.
Use the alt attribute on your image elements
If your site navigation uses image links, provide
simple text links at the bottom of the page.
32
Reference
Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP
Programmer's Reference, Hungry Minds Inc,U.S.
Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility
and Protecting Against Worst-Case Scenarios with XHTML and CSS,
New Riders.
Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript