Embed Size (px)
Citation preview
Colors, Images, & Image Maps
Working with Color
• Colors are defined in terms of RGB Triplet– Red, Green, Blue– 0 to 255 in intensity– (00, 00, 00) is black– (255, 255, 255) is white– Numbers are expressed in Hexadecimal– 000000 to FFFFFF
Body Colors
<body bgcolor="#000000” text="#FFFFFF" link="#0000FF” alink="#FF2020" vlink="#800020>
• bgcolor Background Color
• text Text Color
• link HyperLink Color
• vlink Visited link
• alink Active link
Body Colors
http://www.bagism.com/colormaker/
Note: Specifying the color attributes on the BODY tag has been deprecated
Named Colors
<body bgcolor=white text=black link=blue alink=yellow vlink=red>
• Colors can appear very different in different browsers
• Best to choose from “browser safe” list
<FONT> Tag*
<FONT SIZE=size COLOR=color FACE=font>
text text text
</FONT>
*Deprecated Tag
Size Parameter
SIZE = point size
or
SIZE=+incr (relative to surrounding text)
<FONT SIZE=2>
<FONT SIZE=+2>
COLOR Parameter
• Uses RGB triplet or named color
• Be careful that font color doesn’t disappear into the background color
FACE Parameter
• Overrides browser default
• Font must be available on user’s computer
• Can specify a preferred list
<FONT FACE=“verdana, arial”>
Background Image
<BODY BACKGROUND = “image.gif”>• Be careful that text is readable over image• Image will tile (repeat) if it doesn’t fill the
entire screen• Can specify both BGCOLOR and
BACKGROUND– if image file is not found, BGCOLOR will
display
Background Image
<BODY BACKGROUND = “image.gif”
bgproperties=“fixed”>
• Causes the text to scroll over the image
Chapter 3.2 - 3.3
Image Files
Image Formats
• GIF– Graphics Interchange Format
– Limited to 256 colors
– Photos tend to be grainy when stored this way
– Transparent colors
– Animations
– Interlacing allows image to be displayed in more and more detail while it is loading
PNG
• Portable Network Graphics
• Replacement for GIFs because of lawsuits
• Can’t be animated
Image Formats
Image Formats
• JPEG– Joint Photographics Expert Group
– Uses all 16.7 million colors available
– Usually used for photos
– Can be compressed, usually smaller than GIF
– Compressing usually loses quality of photo
Image Tag
<IMG SRC=“file” ALT=“alternate text” HEIGHT=value WIDTH=value>
• Alternate text – Displays while image is loading– Pops up when mouse passes over– Appears in text based browsers or when images
are turned off
Image Tag
<IMG SRC=“file” ALT=“alternate text” HEIGHT=value WIDTH=value>
• Height/Width – Controls space image takes on page– Doesn’t control image file size– It is a good idea to specify so that text doesn’t
jump around when page loads
Controlling Image Placement
<IMG SRC=“file” ALIGN=alignment>
• Alignment – Top|Middle|Bottom– Controls alignment of surrounding text– Standard in all browsers
Controlling Image Placement
<IMG SRC=“file” ALIGN=alignment>
• Alignment – Left|Right– Controls alignment of surrounding text– Text wraps around image
See Figure 3-33 for other options
Controlling Image Placement
<IMG SRC=“file” ALIGN=alignment
VSPACE=value HSPACE=value>
• HSPACE – Space to left and right of image
• VSPACE– Space above and below image
Controlling Image Border
<IMG SRC=“file” BORDER=value>
• Puts a border around the edge of an image
Tips
• Reduce the size of images files using a graphics tool
• Save images as 256 colors rather than 16.7 million– Browser won’t have to “dither” which takes time– Speeds download
• Use a thumbnail version of the image as a hyperlink to a larger more detailed version
• Total page should be < 40K (30 seconds with 28.8 speed modem)
Image Maps
• Overlay that allows hot spots in an image to be hyperlinks
• Client Side– Fast
– Map is stored inside HTML page
– Shows coordinates of hot spots
• Server Side– Requires communication back and forth with Web
Server to find hot spots
Image Map
<MAP Name=”xxxxx”>
<area shape = rect|circle|poly coords=”99,99,99,99” href=”xxxx.htm”>
</MAP>
• Coordinates are relative to the upper left corner of image
• Vary depending on area shape
<IMG SRC=”xxx.gif” USEMAP=”#xxxxx”>
Rectangular Hotspot
<AREA SHAPE=RECT COORDS=“5,45,108,157” HREF=“MITCHELL.HTM”>
• 5,45 is upper left coordinate
• 108,157 is lower right coordinate
Circular Hotspot
<AREA SHAPE=CIRCLE COORDS=“161,130,69” HREF=“BRINKMAN.HTM”>
• 161,130 is center coordinate
• 69 is radius
Polygonal Hotspot
<AREA SHAPE=POLY COORDS=“29,4,29,41,111,41,111,78,213, 78, 213,4” HREF=“BRINKMAN.HTM”>
• Irregular Shape
• Each pair is a corner
