Download presentation
Presentation is loading. Please wait.
1
Colors, Images, & Image Maps
2
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
3
Body Colors bgcolor Background Color text Text Color link HyperLink Color vlink Visited link alink Active link
4
Body Colors http://www.bagism.com/colormaker/ Note: Specifying the color attributes on the BODY tag has been deprecated
5
Named Colors Colors can appear very different in different browsers Best to choose from “browser safe” list
6
Tag* text text text *Deprecated Tag
7
Size Parameter SIZE = point size or SIZE=+incr (relative to surrounding text)
8
COLOR Parameter Uses RGB triplet or named color Be careful that font color doesn’t disappear into the background color
9
FACE Parameter Overrides browser default Font must be available on user’s computer Can specify a preferred list
10
Background Image 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
11
Background Image <BODY BACKGROUND = “image.gif” bgproperties=“fixed”> Causes the text to scroll over the image
12
Chapter 3.2 - 3.3 Image Files
13
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
14
PNG Portable Network Graphics Replacement for GIFs because of lawsuits Can’t be animated Image Formats
15
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
16
Image Tag Alternate text –Displays while image is loading –Pops up when mouse passes over –Appears in text based browsers or when images are turned off
17
Image Tag 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
18
Controlling Image Placement Alignment –Top|Middle|Bottom –Controls alignment of surrounding text –Standard in all browsers
19
Controlling Image Placement Alignment –Left|Right –Controls alignment of surrounding text –Text wraps around image See Figure 3-33 for other options
20
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
21
Controlling Image Border Puts a border around the edge of an image
22
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)
23
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
24
Image Map Coordinates are relative to the upper left corner of image Vary depending on area shape
25
Rectangular Hotspot 5,45 is upper left coordinate 108,157 is lower right coordinate
26
Circular Hotspot 161,130 is center coordinate 69 is radius
27
Polygonal Hotspot Irregular Shape Each pair is a corner
Similar presentations
