sign in sign up
<<
Home , Bitmap, Transparency (graphic)

CREATING AN IMAGE MAP WITH HOTSPOTS

KEEP YOUR PAGE ATTRACTIVE AND INTERESTING OBJECTIVES

• Identify and compare graphic formats

• Describe compression schemes

• Discuss cropping, resizing, and resampling of graphics

• Create an image map with hotspots MAIN IDEAS

REVIEW • The two most common graphic file formats are GIF and JPEG. • Compression schemes reduce an image’s download time but also diminish its quality. • Modifying a graphic may require the use of an program • Dreamweaver users can make minor edits to images without needing a separate program NEW • Image maps let users click hotspots that link to related pages or information GRAPHIC FILE FORMATS

• Graphic Interchange Format (GIF) – [hard g as in graphic] • This format is limited to the 8 with only 256 colors. • GIF is still a popular image format on the internet because image size is relatively small compared to other types. • GIF compresses images in two ways: • first, by reducing the number of colors in rich color images, thus reducing the number of per . • Second, GIF replaces multiple occurring patterns (large patterns) into one. So instead of storing five kinds of blue, it stores only one blue. • IF is most suitable for graphics, diagrams, cartoons and logos with relatively few colors. GIF is still the chosen format for animation effects.

• Joint Photographic Experts Group (JPEG) • The most popular among the image formats used on the web. • JPEG files are very ‘lossy’, meaning so much information is lost from the original image when you save it in JPEG file. • This is because JPEG discards most of the information to keep the image file size small; which means some degree of quality is also lost. GRAPHIC FILE FORMATS

• Windows (BMP) • This format image files within the Microsoft Windows operating system. In fact, it was at one point one of the few image formats. • These files are large and uncompressed, but the images are rich in color, high in quality, simple and compatible in all Windows OS and programs. • BMP files are made of millions and millions of dots called ‘’, with different colors and arrangements to come up with an image or pattern. It might an 8-bit, 16-bit or 24-bit image. • Thus when you make a BMP image larger or smaller, you are making the individual pixels larger, and thus making the shapes look fuzzy and jagged. • BMP files are not great and not very popular. Being oversized, bitmap files are not what you call ‘web friendly’, nor are they compatible in all platforms and they do not scale well. • Tagged Image File Format (TIFF) • TIFF was created by Aldus for ‘desktop publishing’, and by 2009 it was transferred to the control of Adobe Systems. • TIFF is popular among common users, but has gained recognition in the graphic design, publishing and photography industry. • It is also popular among Apple users. GRAPHIC FILE FORMATS

• Portable Network Graphics (PNG) • Image format specifically designed for the web • It is a superior version of the GIF • Like the GIF format, the PNG is saved with 256 colors maximum, but it saves the color information more efficiently. Graphic Comparison

File File Advantages Disadvantages Format Extension GIF . Small file size / can do small Only supports 256 colors / animation effects / lossless oldest format on the web quality / supports JPEG .jpg or . Up to 16 million colors / great Tend to discard a lot of data for photographs that need fine / cannot be animated / does attention / most widely used not support transparency and accepted BMP .bmp Works well with Windows / Does not scale or compress supports millions of colors well / huge files PNG .png More colors than GIF files / Not good for large images / smaller file sizes / supports cannot be animated / not all transparency better / lossless browsers support TIFF . Flexible format / high quality Very large file size image format Lossless vs Schemes

Lossless Compression Lossy Compression • Lossless scheme means • Lossy compression works very differently. that a graphic file loses • These programs simply no data when it is eliminate "unnecessary" bits of information, tailoring the file compressed so that it is smaller. • Does not really impact • This type of compression is used a lot for reducing the file download time size of bitmap pictures, which • GIF and PNG files tend to be fairly bulky. • Result is reduced image automatically use lossless quality when decompressing compression • JPEG files use lossy compression IMAGE MAPS: WORKING WITH HOTSPOTS

• An image map is an image that contains one or more clickable sections. • These are referred to as hotspots and they function as hyperlinks. • In Dreamweaver, you can create oval, rectangular, or polygonal hotspots. • You can also edit hotspots by selecting, moving, and deleting them, or by changing a hyperlink.

CREATING OVAL OR RECTANGULAR HOTSPOTS

• If a portion of an image contains an oval, such as a basketball, an oval hotspot would be the best choice. • A rectangular hotspot can be used for portions of images that resemble a rectangle or square. • If the desired hotspot is more of a free-lance shape, then the polygonal hotspot tool would all you to create more precisely shaped hotspots. STEPS TO CREATING IMAGE MAP WITH HOTSPOTS

1. Select the image that will contain the hotspot. When the image is selected, the Image Properties pane appears at the bottom of the window.

STEPS TO CREATING IMAGE MAP WITH HOTSPOTS

2. Click on the hotspot tool that you would like to use for your image map. Again, it will depend on your image. Rectangular Hotspot Tool STEPS TO CREATING IMAGE MAP WITH HOTSPOTS

2. Click on the hotspot tool that you would like to use for your image map. Again, it will depend on your image. Oval Hotspot Tool STEPS TO CREATING IMAGE MAP WITH HOTSPOTS

2. Click on the hotspot tool that you would like to use for your image map. Again, it will depend on your image. Polygon Hotspot Tool STEPS TO CREATING IMAGE MAP WITH HOTSPOTS

3. Position the pointer over the selected image and click at points outlining the desired shape that you wish to become your hotspot.

STEPS TO CREATING IMAGE MAP WITH HOTSPOTS

4. In the Properties inspector, in the Link box, type in the page or site you want that shape to link to. You can also point to the file if it is within your site. You should add an Alt description for you image map to help visually impaired viewers who use tools to have a page read to them.

Link to your page here

Page name