Images & Image Images & Image MapsMaps

16th February

Images & Image MapsImages & 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 InformationGeneral 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

4

Types of GraphicsTypes of Graphics

Graphic types commonly used on Web pages: GIF JPG PNG

5

GIFGIF

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

6

JPEGJPEG

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

7

PNGPNG 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

ImagesImages

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 ScalingImage 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)

10

XHTML Image XHTML Image ElementElement

Configures graphics on a Web page

src Attribute File name of the graphic

alt Attribute Configures alternate text content (description)

height Attribute Height of the graphic in pixels

width Attribute Width of the graphic in pixels

<img src=“cake.gif” alt=“birthday cake” height=“100” width=“100” />

XHTML XHTML <img /><img /> AlignmentAlignment

XHTML More XHTML More <img /><img /> AttributesAttributes

Adding Vertical Space vspace Attribute

Adding Horizontal Space hspace Attribute

A more modern approach is to use the CSS padding property

Accessibility & ImagesAccessibility & 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

14

Image LinksImage Links To create an image link use an anchor

element to contain an image element

Home

<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home" /></a>

Using ImagesUsing 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 Choosing Names for Image FilesImage 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

17

OrganizingOrganizingYour SiteYour Site

<img src=“images/home.gif” alt=“Home” height=“100” width=“200”/>

• Place images in their own folder

• Code the path to the file in the src atttribute

Other Image TopicsOther Image Topics

Thumbnail Images Image Maps Sources for Graphics Guidelines for Using Images Accessibility

19

Thumbnail ImageThumbnail Image

A small image configured to link to a larger version of that image.

Image MapsImage 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)Image Maps (example)

Triangle.htmlTriangle.htmlRectangle.htmlRectangle.html

Circle.htmlCircle.html

mailto:....@....mailto:....@....

Types of Image MapsTypes 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 MapsCreating Image Maps

Create the image

Define the virtual shapes of the map

Configure the image map

Create the XHTML files (URLs)

Creating Image MapsCreating 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

25

Image MapsImage 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

Sample Sample Image MapImage 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 Write the XHTML code for the image map in the next the image map in the next slideslide 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 Write the XHTML code for thisthis

Restaurant Image MapRestaurant Image Map

Appetiser asAppetiser asrectanglerectangle

Meals asMeals astriangletriangle

Pizza asPizza ascirclecircle

Using Image MapsUsing 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>

30

Sources for GraphicsSources 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

31

GuidelinesGuidelinesfor for

Using Using ImagesImages

Consider image load time Reuse images Consider image file size with image quality Screen Resolution Specify dimensions Gamma – brightness & contrast

32

Images and AccessibilityImages 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.

Reference 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