1. © 2002 D & D Enterprises 1 Linking Images For Navigation & Clickable Image Maps

2. © 2002 D & D Enterprises 2 Misc. Image Manipulation You can put an image inside of an anchor and you will probably want to turn off the image border Example: http://www.internetsd.com/courses/html1/imagelink.html

3. © 2002 D & D Enterprises 3 Misc. Image Manipulation (start with template.html add after ) save file as a:\imagelink.html

4. © 2002 D & D Enterprises 4 Navigation Icons When you have a set of related Web pages where the navigation takes place in a consistent way (moving forward or back, up or down, home etc.) you can provide a menu of navigation options at the top or bottom of each page so that your readers know exactly how to find their way through your documents

5. © 2002 D & D Enterprises 5 Navigation Example After the last aligned bottom image, in a:\images.html add something like this: Where to go from here: NOTE: You can download the gif files from http://www.internetsd.com/courses/html1/ http://www.internetsd.com/courses/html1/

6. © 2002 D & D Enterprises 6 More Navigation After getting the structure input, add some anchors to the images to activate them The HTML code will look like this:

7. © 2002 D & D Enterprises 7 Refining the Navigation Links You can add text describing what is on the other side of the link. You can add the text inside the anchor if you want the text to be a hot spot as well as the icon Or you can have the text outside the anchor so only the icon serves as a hot spot.

8. © 2002 D & D Enterprises 8 Describing Navigation Links becomes return to my home page move on my headers examples go back to the spacey examples page send me some e-mail!

9. © 2002 D & D Enterprises 9 Check Out Navigation Links Open the Netscape Web Browser Open the URL: http://www.internetsd.com/courses/html1/navigate.html It is very important to keep some kind of link on each of your Web pages http://www.internetsd.com/diane/about.html

10. © 2002 D & D Enterprises 10 Image Maps Earlier you learned how to create an image that doubles as a navigation link by including the tag inside a link tag By doing this, the entire image becomes a link, you could click on the image, the background, or the border and the same effect would occur

11. © 2002 D & D Enterprises 11 Steps to Creating Image Maps 1. Select an appropriate image 2. Create a map file -- a text file that indicates the coordinates of various areas on the image and mapping those areas to URLs to be loaded when a hit on that area is detected 3. Connect the image, the mapfile and the gateway script in an HTML file indicating that its a map

12. © 2002 D & D Enterprises 12 Image Maps In image maps different parts of the image activate different links NOTE: image maps will not work in text only browsers -- text only readers will not even get an indication that the image exists and will not be able to navigate the presentation It is important that you create a text only equivalent

13. © 2002 D & D Enterprises 13 Image Maps Allow you to create sophisticated user interfaces with click-able images Server side imagemaps are troublesome to build! Until recently, you needed access to a CGI program (more on this later!) to decode the imagemap request. Now there are client side imagemaps

14. © 2002 D & D Enterprises 14 Image Maps The basics of imagemaps are easy -- add the proper attribute to the tag T-H-E-N make and decode a map file… a mapfile is a set of coordinates that, when overlaid on top of the clicked image tell it where to go when clicked.

15. © 2002 D & D Enterprises 15 Getting an Image To create an image map, first you need an image. The image is most useful if it has several discrete visual areas that can be individually selected Photographs are difficult because their elements blend together and are often of unusual shape

16. © 2002 D & D Enterprises 16 Clickable Regions The heart of the image map structure is the map file, essentially a description of the various regions in the image that should be clickable and the links they point to when theyre selected. First step to creating a map file is to sketch out the locations of the clickable areas on your image and to find out the coordinates of those images

17. © 2002 D & D Enterprises 17 Map Tag <area [shape="shape"] coords="x,y,..." [href=" reference"] [nohref]>

18. © 2002 D & D Enterprises 18 Format /cgi-bin/image … the imagemap program script /user-dir/image.map... the map file with coordinates /userdir/image.gif... the gif image file

19. © 2002 D & D Enterprises 19 Putting the Image Map Together for a SERVER-SIDE Image Map Server Side Image Map

20. © 2002 D & D Enterprises 20 Server Side Clickable Image Map http://curry.edschool.virginia.edu/go/WebTools/I magemap/SSIM.html

21. © 2002 D & D Enterprises 21 Client Side CLICKABLE Image Map http://curry.edschool.virginia.edu/go/WebTools/I magemap/CSIM_SSIM.html

22. © 2002 D & D Enterprises 22 Domino.jpg In my course directory there is a file called domino.jpg http://www.internetsd.com/courses/html1/domino.jpg

23. © 2002 D & D Enterprises 23 Domino.jpg Coordinates We have a graphic file: domino.jpg We need a mapedit program We will be using MapEdit a program by Boutell.Com, Inc. http://www.boutell.com/mapedit/http://www.boutell.com/mapedit/ MapEdit is a graphical editor for World Wide Web image maps (clickable imagemaps). Simple but fully functional and easy to use.

24. © 2002 D & D Enterprises 24 MapEdit Start the MapEdit software Step by Step Guided Practice Graphic File: domino.jpg HTML File: clickable.html HTML File: two.html HTML File: three.html

25. clickable.html before mapedit Clickable Imagemap Example clickable imagemap demo file this html imagemaps samples file demonstrates a simple client side clickable image map click on the two to go to two.html click on the three to go to three.html

26. two.html this is diane's second html document head> oh look -- html! here is it, my second html document!! press the back button to return to the clickable image html document!

27. three.html this is diane's third html document third file here is it, my third html document!! press the back button to return to the clickable image html document!

28. FYI: AFTER mapedit clickable imagemap example Clickable Imagemap Demo File This HTML Imagemaps Samples File demonstrates a simple client side clickable image map Click on the TWO to go to two.html Click on the THREE to go to three.html

29. © 2002 D & D Enterprises 29 Next Frames