1 / 34

Chapter 5

Chapter 5. Creating an Image Map. Chapter Objectives. Define terms relating to image mapping List the differences between server-side and client-side image maps Name the two components of an image map and describe the steps to implement an image map

talasi
Download Presentation

Chapter 5

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Chapter 5 Creating anImage Map

  2. Chapter Objectives • Defineterms relating to imagemapping • List the differences between server-side and client-sideimagemaps • Name the twocomponents of an imagemap and describe the steps to implement an imagemap • Distinguish between appropriate and inappropriateimages for mapping • Sketchhotspots on an image Chapter 5: Creating an Image Map

  3. Chapter Objectives • Describe how the x- and y-coordinatesrelate to vertical and horizontal alignment • Open an image in Paint and use Paint to map the coordinates • Create the homepage and additionalWebpages • Create a table, insert an image into a table, and use the usemapattribute to define an imagemap Chapter 5: Creating an Image Map

  4. Chapter Objectives • Addtext to a table cell and create a horizontalmenubar with textlinks • Use the <map> </map> tags to start and end a map • Use the <area> tag to indicate the shape, coordinates, and URL for a mappedarea • Changelinkcolors Chapter 5: Creating an Image Map

  5. Creating an Image Map • Imagemap – 2 components • Image • Map definition • Hotspots • URLs to which they link • Selecting Images • Not all images appropriate for image mapping • Good choice – image with visual sections • Example USA map Chapter 5: Creating an Image Map

  6. Creating an Image Map • Sketching the Borders of Hotspots • Clickable areas within the image • Good choice – image with visual sections • Example USA map • Mapping Image Coordinates • After determining how to divide image into areas, must determine the x and y coordinates for those sections • x-axis – runs horizontally along base of image • y-axis – runs vertically along the left of image • Point(0,0) – top left corner of image • First number of coordinate pair is x-coordinate Chapter 5: Creating an Image Map

  7. Creating an Image Map • Software for Image Mapping • Simple or sophisticated image editing or paint program can be used to determine the x and y coordinates for various imagepoints • Paint program – used in this chapter’s project • Example USA map • 3 shapes for mapping areas(see next slide) • Rectangle – coordinates top-left and bottom-right corners • Circle – use center point and radius as coordinates • Polygon – use each corner point coordinate Note: to definemap area of image, must determine the x and y coordinates for that shape, then insert the coordinates for the various map shapes into the HTML code Chapter 5: Creating an Image Map

  8. Creating an Image Map determine the x and y coordinates for various imagepoints Chapter 5: Creating an Image Map 8

  9. Creating an Image Map • Coding the Map • Final step in an image map is writingHTMLcode for the map • Client-side image map - tags <map></map> and <area> used • <area> tagdefines specific areas of the map and the links and anchors those areas. • X and y coordinates for each map area inserted into <area> tag with coords attribute with quotationmarks separated by commas Chapter 5: Creating an Image Map 9

  10. Starting Paint Color box(might appearat bottom) toolbox drawing area Chapter 5: Creating an Image Map

  11. Opening an Image File in Paint southwest.jpgimage open inPaint window Pencil buttonselected bydefault Chapter 5: Creating an Image Map

  12. Locating X- and Y- Coordinates of an Image Point used forNevada link Mousepointer Pencilbutton Pencil tool at x- andy-coordinates (234,177) Point used forCalifornia link x- and y-coordinates (234,177) on status bar Chapter 5: Creating an Image Map

  13. Starting Notepad and Entering Initial HTML Tags HTML Template.html Chapter 5: Creating an Image Map

  14. Creating a Table <table> tagalign content at top vertically Chapter 5: Creating an Image Map

  15. Inserting an Image to Use as an Image Map hspace attributeadds horizontalspace around image usemap attribute tellsbrowser what image map to use <img> tag with source, width, andheight attributes Chapter 5: Creating an Image Map

  16. Adding a Header and Text to a Table Cell Name of file forSouthwest header Paragraphsof text Chapter 5: Creating an Image Map

  17. Creating a Horizontal Menu Bar with Text Links HTML code shown in Table 5–6 Chapter 5: Creating an Image Map

  18. Creating a Horizontal Menu Bar with Text Links Horizontal menu bar with textlinks to three Web pages thatcorrespond to three hotspotson image map Chapter 5: Creating an Image Map

  19. Creating an Image Map • HTML code shown in Table 5–8 Chapter 5: Creating an Image Map

  20. Creating an Image Map name and id attributescorrespond with mapname used in <img> tag on line 16 Three <area> tagsthat map three states in southwest.jpgmap X- and y- coordinates are pairsof numbers that correspond topoints on the map polygons;5 pairs for Arizona and Nevada7 pairs for California all three hotspots arepolygon shaped Chapter 5: Creating an Image Map

  21. Validating, Viewing, and Printing a Web Page Paragraphsof text image map E-mail link Horizontalmenu bar Chapter 5: Creating an Image Map

  22. Creating a Second Web Page headerimage AZ flagimage Horizontal menubar with links to allother Web pages Image relevantto Arizona Two-column table of facts about AZ Chapter 5: Creating an Image Map 22

  23. Adding a Heading HTML code shown in Table 5–9 Image of AZ flagfor top, left sideof Web page Image of AZheader for center, top of Web page Chapter 5: Creating an Image Map

  24. Adding a Horizontal Menu Bar • HTML code shown in Table 5–10, pressing the Horizontal menubar same as that onhome page; provideseasy acces to all Webpages on Web site Chapter 5: Creating an Image Map

  25. Adding Information and an Image HTML code shown in Table 5–11 Image of cactuson ArizonaWeb page Table of factsabout state ofArizona Chapter 5: Creating an Image Map

  26. Adding Information and an Image Image of cactuson ArizonaWeb page Table of factsabout state ofArizona Chapter 5: Creating an Image Map

  27. Adding Additional Information Remainder ofAZ facts putin a table Chapter 5: Creating an Image Map

  28. Validating, Viewing, and Printing the Web Page AZ headerimage Horizontal menubar with links to allother Web pages Image ofcactus Table of factsabout Arizona Chapter 5: Creating an Image Map

  29. Testing the Links CaliforniaWeb page Chapter 5: Creating an Image Map

  30. Chapter Summary • Defineterms relating to imagemapping • List the differences between server-side and client-side image maps • Name the twocomponents of an imagemap and describe the steps to implement an imagemap • Distinguish between appropriate and inappropriateimages for mapping • Sketchhotspots on an image Chapter 5: Creating an Image Map

  31. Chapter Summary • Describe how the x- and y-coordinates relate to vertical and horizontal alignment • Open an image in Paint and usePaint to map the coordinates • Create the homepage and additionalWebpages • Create a table, insert an image into a table, and use the usemapattribute to define a map Chapter 5: Creating an Image Map

  32. Chapter Summary • Addtext to a table cell and create a horizontalmenubar with textlinks • Use the <map> </map> tags to start and end a map • Use the <area> tag to indicate the shape, coordinates, and URL for a mappedarea • Changelinkcolors Chapter 5: Creating an Image Map

  33. Homework # 9 In the Lab 1 page HTML 251-252 Creating a Donation Analysis Page SeeINF 186 Computer Assignment 9 Web page for details, hints, and requirements for the assignment Project 4: Creating Tables in a Web Site 33

  34. Chapter 5 Complete Creating anImage Map

More Related