colors, images, & image maps. working with color colors are defined in terms of rgb triplet...
TRANSCRIPT
![Page 1: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/1.jpg)
Colors, Images, & Image Maps
![Page 2: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/2.jpg)
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
![Page 3: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/3.jpg)
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
![Page 4: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/4.jpg)
Body Colors
http://www.bagism.com/colormaker/
Note: Specifying the color attributes on the BODY tag has been deprecated
![Page 5: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/5.jpg)
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
![Page 6: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/6.jpg)
<FONT> Tag*
<FONT SIZE=size COLOR=color FACE=font>
text text text
</FONT>
*Deprecated Tag
![Page 7: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/7.jpg)
Size Parameter
SIZE = point size
or
SIZE=+incr (relative to surrounding text)
<FONT SIZE=2>
<FONT SIZE=+2>
![Page 8: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/8.jpg)
COLOR Parameter
• Uses RGB triplet or named color
• Be careful that font color doesn’t disappear into the background color
![Page 9: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/9.jpg)
FACE Parameter
• Overrides browser default
• Font must be available on user’s computer
• Can specify a preferred list
<FONT FACE=“verdana, arial”>
![Page 10: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/10.jpg)
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
![Page 11: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/11.jpg)
Background Image
<BODY BACKGROUND = “image.gif”
bgproperties=“fixed”>
• Causes the text to scroll over the image
![Page 12: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/12.jpg)
Chapter 3.2 - 3.3
Image Files
![Page 13: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/13.jpg)
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
![Page 14: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/14.jpg)
PNG
• Portable Network Graphics
• Replacement for GIFs because of lawsuits
• Can’t be animated
Image Formats
![Page 15: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/15.jpg)
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
![Page 16: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/16.jpg)
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
![Page 17: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/17.jpg)
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
![Page 18: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/18.jpg)
Controlling Image Placement
<IMG SRC=“file” ALIGN=alignment>
• Alignment – Top|Middle|Bottom– Controls alignment of surrounding text– Standard in all browsers
![Page 19: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/19.jpg)
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
![Page 20: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/20.jpg)
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
![Page 21: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/21.jpg)
Controlling Image Border
<IMG SRC=“file” BORDER=value>
• Puts a border around the edge of an image
![Page 22: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/22.jpg)
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)
![Page 23: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/23.jpg)
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
![Page 24: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/24.jpg)
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”>
![Page 25: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/25.jpg)
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
![Page 26: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/26.jpg)
Circular Hotspot
<AREA SHAPE=CIRCLE COORDS=“161,130,69” HREF=“BRINKMAN.HTM”>
• 161,130 is center coordinate
• 69 is radius
![Page 27: 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](https://reader030.vdocuments.site/reader030/viewer/2022032804/56649e4e5503460f94b4424c/html5/thumbnails/27.jpg)
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