DOCSLIB.ORG

Creating an Image Map with Hotspots

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Creating an Image Map with Hotspots 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 image editing 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 bit palette with only 256 colors. • GIF is still a popular image format on the internet because image size is relatively small compared to other image compression types. • GIF compresses images in two ways: • first, by reducing the number of colors in rich color images, thus reducing the number of bits per pixel. • 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 Bitmap (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 ‘pixels’, 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 .gif Small file size / can do small Only supports 256 colors / animation effects / lossless oldest format on the web quality / supports transparency JPEG .jpg or .jpeg 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 .tiff Flexible format / high quality Very large file size image format Lossless vs Lossy Compression 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 .
Load more

Recommended publications
  • Exploring the .BMP File Format
    Exploring the .BMP File Format Don Lancaster Synergetics, Box 809, Thatcher, AZ 85552 copyright c2003 as GuruGram #14 http://www.tinaja.com [email protected] (928) 428-4073 The .BMP image standard is used by Windows and elsewhere to represent graphics images in any of several different display and compression options. The .BMP advantages are that each pixel is usually independently available for any alteration or modification. And that repeated use does not normally degrade the image. Because lossy compression is not used. Its main disadvantage is that file sizes are usually horrendous compared to JPEG, fractal, GIF, or other lossy compression schemes. A comparison of popular image standards can be found here. I’ve long been using the .BMP format for my eBay and my other phototography, scanning, and post processing. I firmly believe that… All photography, scanning, and all image post-processing should always be done using .BMP or a similar non-lossy format. Only after all post-processing is complete should JPEG or another compressed distribution format be chosen. Some current examples of my .BMP work now do include the IMAGIMAG.PDF post-processing tutorial, the Bitmap Typewriterthat generates fully anti-aliased small fonts, the Aerial Photo Combiner, and similar utilities and tutorials found on our Fonts & Images, PostScript, and on our Acrobat library pages. A few projects of current interest involving .BMP files include true view camera swings and tilts for a digital camera, distortion correction, dodging & burning, preventing white punchthrough on knockouts, and emphasis vignetting. Mainly applied to uncompressed RGBX 24-bit color .BMP files.
    [Show full text]
  • TS 101 499 V2.2.1 (2008-07) Technical Specification
    ETSI TS 101 499 V2.2.1 (2008-07) Technical Specification Digital Audio Broadcasting (DAB); MOT SlideShow; User Application Specification European Broadcasting Union Union Européenne de Radio-Télévision EBU·UER 2 ETSI TS 101 499 V2.2.1 (2008-07) Reference RTS/JTC-DAB-57 Keywords audio, broadcasting, DAB, digital, PAD ETSI 650 Route des Lucioles F-06921 Sophia Antipolis Cedex - FRANCE Tel.: +33 4 92 94 42 00 Fax: +33 4 93 65 47 16 Siret N° 348 623 562 00017 - NAF 742 C Association à but non lucratif enregistrée à la Sous-Préfecture de Grasse (06) N° 7803/88 Important notice Individual copies of the present document can be downloaded from: http://www.etsi.org The present document may be made available in more than one electronic version or in print. In any case of existing or perceived difference in contents between such versions, the reference version is the Portable Document Format (PDF). In case of dispute, the reference shall be the printing on ETSI printers of the PDF version kept on a specific network drive within ETSI Secretariat. Users of the present document should be aware that the document may be subject to revision or change of status. Information on the current status of this and other ETSI documents is available at http://portal.etsi.org/tb/status/status.asp If you find errors in the present document, please send your comment to one of the following services: http://portal.etsi.org/chaircor/ETSI_support.asp Copyright Notification No part may be reproduced except as authorized by written permission.
    [Show full text]
  • 51 Document Output
    ◆ Document Output <Function> You can output a document from “Document List” as an image file. All the documents selected in “Document List” can be outputted as a document in a specified format. <ICP Setting Procedures> Refer to 4 3, 6 15 1. Click “Output Document” at the right side. 2. The “Save As” dialog box appears. 3. Click “Compression” to confirm the file compression setting for “TIFF File”. If you change, click “OK”. 4. Select “PDF File” as a file format in the “Save as type” list box. 5. Click “Compression” to confirm the file compression setting for “PDF File”. If you change, click “OK”. 6. Select “PDF(Searchable) File” as a file format in the “Save as type” list box. 7. Click “OCR Settings” to confirm the searchable file setting. If you change, click “OK”. 8. Select “Jpeg File” as a file format in the “Save as type” list box. 9. Click “Compression” to confirm the file compression setting for “JPEG File”. If you change, click “OK”. 10. Select “Jpeg2000 File” as a file format in the “Save as type” list box. 11. Click “Compression” to confirm the file compression setting for “Jpeg2000 File”. If you change, click “OK”. 12. Select “Depends on Image Type” in the “Save as type” list box. 13. “File Type Settings” dialog box appears and confirm the settings for each type. If you change, click “OK”. 14. Select “Jpeg File” as a file format in the “Save as type” list box. 15. Confirm the setting of File Name at the bottom right and click “Save”.
    [Show full text]
  • Raster Images in R Graphics by Paul Murrell
    48 CONTRIBUTED RESEARCH ARTICLES Raster Images in R Graphics by Paul Murrell Abstract The R graphics engine has new sup- 39837_s_at 1267_at 402_s_at 32562_at 37600_at 1007_s_at 36643_at 1039_s_at 40215_at 39781_at port for rendering raster images via the func- 266_s_at 307_at 38408_at 37539_at 1911_s_at 1463_at 2057_g_at 39556_at 41744_at 34789_at 34850_at rasterImage() grid.raster() 38631_at tions and . This 37280_at 36536_at 37006_at 41397_at 41346_at 40692_at 35714_at 1992_at 33244_at 40167_s_at 32872_at 34699_at 33440_at leads to better scaling of raster images, faster 36275_at 33809_at 40953_at 1308_g_at 1928_s_at 1307_at 40504_at 41742_s_at 41743_i_at 1674_at 40784_at 40785_g_at rendering to screen, and smaller graphics files. 37978_at 37099_at 1973_s_at 38413_at 2036_s_at 1126_s_at 31472_s_at 37184_at 35256_at 40493_at 41779_at 33412_at Several examples of possible applications of 37193_at 37479_at 39210_at 919_at 1140_at 41478_at 35831_at 176_at 37724_at 38385_at 41401_at 41071_at these new features are described. 39135_at 34961_at 37251_s_at 41470_at 1947_g_at 37810_at 36777_at 38004_at 177_at 36897_at 34106_at 31615_i_at 35665_at 33358_at 39315_at 41191_at 931_at 1914_at 36873_at 37809_at 39635_at 38223_at 33936_at 37558_at 41348_at 31605_at 205_g_at 32475_at 34247_at 36149_at 1500_at 34098_f_at 33528_at 35663_at 40393_at 33193_at 39716_at 33405_at 1929_at 36092_at 32215_i_at 41448_at 40763_at 873_at Prior to version 2.11.0, the core R graphics engine 37225_at 38056_at 37413_at 39424_at 32116_at 2039_s_at 40480_s_at 35816_at 1134_at
    [Show full text]
  • Understanding Image Formats and When to Use Them
    Understanding Image Formats And When to Use Them Are you familiar with the extensions after your images? There are so many image formats that it’s so easy to get confused! File extensions like .jpeg, .bmp, .gif, and more can be seen after an image’s file name. Most of us disregard it, thinking there is no significance regarding these image formats. These are all different and not cross‐ compatible. These image formats have their own pros and cons. They were created for specific, yet different purposes. What’s the difference, and when is each format appropriate to use? Every graphic you see online is an image file. Most everything you see printed on paper, plastic or a t‐shirt came from an image file. These files come in a variety of formats, and each is optimized for a specific use. Using the right type for the right job means your design will come out picture perfect and just how you intended. The wrong format could mean a bad print or a poor web image, a giant download or a missing graphic in an email Most image files fit into one of two general categories—raster files and vector files—and each category has its own specific uses. This breakdown isn’t perfect. For example, certain formats can actually contain elements of both types. But this is a good place to start when thinking about which format to use for your projects. Raster Images Raster images are made up of a set grid of dots called pixels where each pixel is assigned a color.
    [Show full text]
  • Effects of JPEG2000 on the Information and Geometry Content of Aerial Photo Compression
    03-082.qxd 1/11/05 5:17 PM Page 157 Effects of JPEG2000 on the Information and Geometry Content of Aerial Photo Compression Jung-Kuan Liu, Houn-Chien Wu, and Tian-Yuan Shih Abstract evaluated the effects of compression on geometric accuracy. Li The standardization effort of the next ISO standard for et al., (2002) indicated that when compression ratios are less compression of the still image, JPEG2000, has recently than a factor of 10, the compressed image is near-lossless with reached International Standard (IS) status. This wavelet- JPEG. In other words, the visual quality of JPEG compressed based standard outperforms the Discrete Cosine Transform images remains excellent and the accuracy of manual image (DCT) based JPEG in terms of compression ratio, as well mensuration is, essentially, not influenced. Paola et al. (1995) as, quality. In this study, the performance of JPEG2000 is and Schmanske and Loew (2001) concentrated on the classifi- evaluated for aerial image compressions. Different com- cation accuracies of compressed images. Paola et al. (1995) pression ratios are applied to scanned aerial photos at the revealed that high quality classifications could be obtained for 1:5 000 scale. Both the image quality measurements and the images with JPEG compression ratios approaching 10:1 or even accuracy of photogrammetric point determination aspects higher. The classification result retains its overall appearance, are examined. The evaluation of image quality is based but the smoothing effect of high compression tends to elimi- on visual analysis of the objects in the scene and on the nate much of the pixel-to-pixel detail.
    [Show full text]
  • Image Formats
    Image Formats Ioannis Rekleitis Many different file formats • JPEG/JFIF • Exif • JPEG 2000 • BMP • GIF • WebP • PNG • HDR raster formats • TIFF • HEIF • PPM, PGM, PBM, • BAT and PNM • BPG CSCE 590: Introduction to Image Processing https://en.wikipedia.org/wiki/Image_file_formats 2 Many different file formats • JPEG/JFIF (Joint Photographic Experts Group) is a lossy compression method; JPEG- compressed images are usually stored in the JFIF (JPEG File Interchange Format) >ile format. The JPEG/JFIF >ilename extension is JPG or JPEG. Nearly every digital camera can save images in the JPEG/JFIF format, which supports eight-bit grayscale images and 24-bit color images (eight bits each for red, green, and blue). JPEG applies lossy compression to images, which can result in a signi>icant reduction of the >ile size. Applications can determine the degree of compression to apply, and the amount of compression affects the visual quality of the result. When not too great, the compression does not noticeably affect or detract from the image's quality, but JPEG iles suffer generational degradation when repeatedly edited and saved. (JPEG also provides lossless image storage, but the lossless version is not widely supported.) • JPEG 2000 is a compression standard enabling both lossless and lossy storage. The compression methods used are different from the ones in standard JFIF/JPEG; they improve quality and compression ratios, but also require more computational power to process. JPEG 2000 also adds features that are missing in JPEG. It is not nearly as common as JPEG, but it is used currently in professional movie editing and distribution (some digital cinemas, for example, use JPEG 2000 for individual movie frames).
    [Show full text]
  • About Graphics/Digital Images
    About Graphics/Digital Images Digital images are found in lots of file formats (types) that are used for various reasons. I liken the file formats to flavors of ice-cream, which you might or might not choose to consume on any given day. One day chocolate is more important than mint; another day you might use vanilla, and on another day you might decide to combine more than one flavor in the same bowl. Likewise, you might choose one type of graphic file for a particular project, but it might be completely inappropriate for another project. What works well for display purposes (keeping it on the computer, or for publication to the internet) might not print well. Something that prints well might be too big a file to post to the internet, or may make your program run too slowly. Also, some authoring programs (like Boardmaker or Classroom Suite) might be written to only understand certain types of image files. Some file types are more common than others, and are more likely to be recognized by the “parent” program (the one you use to display, edit or print your image). Whatever type you pick ultimately depends on how you plan to use the image. The more technical definitions provided below are taken from the glossary found at http://www.photoshopelementsuser.com/glossary.php?letter=B The additional comments I have added, and hopefully let you know why you would care about any of this, anyway. The two biggest types of images I describe here fall loosely into two categories: vector images and bitmap images.
    [Show full text]
  • Package 'Tiff'
    Package ‘tiff’ March 31, 2021 Version 0.1-8 Title Read and Write TIFF Images Author Simon Urbanek <[email protected]> [aut, cre], Kent Johnson <[email protected]> [ctb] Maintainer Simon Urbanek <[email protected]> Depends R (>= 2.9.0) Description Functions to read, write and display bitmap images stored in the TIFF for- mat. It can read and write both files and in-memory raw vectors, including native image repre- sentation. License GPL-2 | GPL-3 SystemRequirements tiff and jpeg libraries URL https://www.rforge.net/tiff/ NeedsCompilation yes Repository CRAN Date/Publication 2021-03-31 15:10:02 UTC R topics documented: readTIFF . .1 writeTIFF . .4 Index 6 readTIFF Read a bitmap image stored in the TIFF format Description Reads an image from a TIFF file/content into a raster array. 1 2 readTIFF Usage readTIFF(source, native = FALSE, all = FALSE, convert = FALSE, info = FALSE, indexed = FALSE, as.is = FALSE, payload = TRUE) Arguments source Either name of the file to read from or a raw vector representing the TIFF file content. native logical, determines the image representation - if FALSE (the default) then the result is an array, if TRUE then the result is a native raster representation (suitable for plotting). all logical scalar or integer vector. TIFF files can contain more than one image. If all=TRUE then all images are returned in a list of images. If all is a vector, it gives the (1-based) indices of images to return. Otherwise only the first image is returned. convert logical, if TRUE then first convert the image into 8-bit RGBA samples and then to an array, see below for details.
    [Show full text]
  • JP2 Format Preservation Assessment
    Digital Date: 03/09/2015 Preservation Assessment: Preservation JP2 Format Team Version: 1.3 Document History Date Version Author(s) Circulation 10/12/2014 1.1 Paul Wheatley, Peter May, External Maureen Pennock 23/02/2015 1.2 Peter May External 03/09/2015 1.3 Simon Whibley External British Library Digital Preservation Team [email protected] This work is licensed under the Creative Commons Attribution 4.0 International License. Page 1 of 10 Digital Date: 03/09/2015 Preservation Assessment: Preservation JP2 Format Team Version: 1.3 1. Introduction This document provides a high level, non-collection specific assessment of the JP2 file format with regard to preservation risks and the practicalities of preserving data in this format. This format assessment is one of a series of assessments carried out by the British Library’s Digital Preservation Team. An explanation of criteria used in this assessment is provided in italics below each heading. 1.1 Scope This document will primarily focus on JP2 (JPEG2000 Part 1, core coding system) defined by ISO/IEC 15444-1:2000, but will reference other parts of the JPEG2000 standard(s) where context is necessary. A separate (or extended) assessment for JPX1 and JPM2, and indeed Motion JPEG2000 (Part 3), may be necessary depending on British Library needs. Issues of both preserving deposited JP2s and preserving JP2s created by the British Library as part of digitisation activities will be considered. Note that this assessment considers format issues only, and does not explore other factors essential to a preservation planning exercise, such as collection specific characteristics, that should always be considered before implementing preservation actions.
    [Show full text]
  • Digital Preservation Guidance Note: Graphics File Formats
    Digital Preservation Guidance Note: 4 Graphics File Formats Digital Preservation Guidance Note 4: Graphics file formats Document Control Author: Adrian Brown, Head of Digital Preservation Research Document Reference: DPGN-04 Issue: 2 Issue Date: August 2008 ©THE NATIONAL ARCHIVES 2008 Page 2 of 15 Digital Preservation Guidance Note 4: Graphics file formats Contents 1 INTRODUCTION .....................................................................................................................4 2 TYPES OF GRAPHICS FORMAT........................................................................................4 2.1 Raster Graphics ...............................................................................................................4 2.1.1 Colour Depth ............................................................................................................5 2.1.2 Colour Spaces and Palettes ..................................................................................5 2.1.3 Transparency............................................................................................................6 2.1.4 Interlacing..................................................................................................................6 2.1.5 Compression ............................................................................................................7 2.2 Vector Graphics ...............................................................................................................7 2.3 Metafiles............................................................................................................................7
    [Show full text]
  • Webp - Faster Web with Smaller Images
    WebP - Faster Web with smaller images Pascal Massimino Google Confidential and Proprietary WebP New image format - Why? ● Average page size: 350KB ● Images: ~65% of Internet traffic Current image formats ● JPEG: 80% of image bytes ● PNG: mainly for alpha, lossless not always wanted ● GIF: used for animations (avatars, smileys) WebP: more efficient unified solution + extra goodies Targets Web images, not at replacing photo formats. Google Confidential and Proprietary WebP ● Unified format ○ Supports both lossy and lossless compression, with transparency ○ all-in-one replacement for JPEG, PNG and GIF ● Target: ~30% smaller images ● low-overhead container (RIFF + chunks) Google Confidential and Proprietary WebP-lossy with alpha Appealing replacement for unneeded lossless use of PNG: sprites for games, logos, page decorations ● YUV: VP8 intra-frame ● Alpha channel: WebP lossless format ● Optional pre-filtering (~10% extra compression) ● Optional quantization --> near-lossless alpha ● Compression gain: 3x compared to lossless Google Confidential and Proprietary WebP - Lossless Techniques ■ More advanced spatial predictors ■ Local palette look up ■ Cross-color de-correlation ■ Separate entropy models for R, G, B, A channels ■ Image data and metadata both are Huffman-coded Still is a very simple format, fast to decode. Google Confidential and Proprietary WebP vs PNG source: published study on developers.google.com/speed/webp Average: 25% smaller size (corpus: 1000 PNG images crawled from the web, optimized with pngcrush) Google Confidential and Proprietary Speed number (takeaway) Encoding ● Lossy (VP8): 5x slower than JPEG ● Lossless: from 2x faster to 10x slower than libpng Decoding ● Lossy (VP8): 2x-3x slower than JPEG ● Lossless: ~1.5x faster than libpng Decoder's goodies: ● Incremental ● Per-row output (very low memory footprint) ● on-the-fly rescaling and cropping (e.g.
    [Show full text]