1 / 29

Linking Images

Linking Images. For Navigation & Clickable Image Maps. Misc. Image Manipulation. You can put an image inside of an anchor <a href> and you will probably want to turn off the image border Example: http://www.internetsd.com/courses/html1/imagelink.html. Misc. Image Manipulation.

teagan-moss
Download Presentation

Linking Images

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. Linking Images For Navigation &Clickable Image Maps

  2. Misc. Image Manipulation • You can put an image inside of an anchor <a href> and you will probably want to turn off the image border • Example: http://www.internetsd.com/courses/html1/imagelink.html

  3. Misc. Image Manipulation (start with template.html add after <BODY>) <img src="books.gif"> <br> <a href="index.html"><img src="books.gif"></a> <br> <img src="books.gif" border="0"> <br> <a href="index.html"><img src="books.gif" border="0"></a> save file as a:\imagelink.html

  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. Navigation Example • After the last aligned bottom image, in a:\images.html add something like this: <p> <hr> Where to go from here: <img src="home.gif"> <img src="forward.gif"> <img src="back.gif"> <img src="mail.gif"> </p> NOTE: You can download the gif files from http://www.internetsd.com/courses/html1/

  6. More Navigation • After getting the structure input, add some anchors to the images to activate them • The HTML code will look like this: <a href=“index.html”> <img src="home.gif"> </a> <a href=“headers.html”> <img src="forward.gif"> </a> <a href=“spaces.html”> <img src="back.gif"> </a> <a href=“mailto:diane@internetsd.com"> <img src="mail.gif"> </a>

  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. Describing Navigation Links • <a href=“index.html”> <img src="home.gif"> </a> • <a href=“headers.html”> <img src="forward.gif"> </a> • <a href=“spaces.html”> <img src="back.gif"> </a> • <a href=“mailto:diane@internetsd.com"> <img src="mail.gif"> </a> becomes • <a href=“index.html”> <img src="home.gif"> </a> return to my home page <br> • <a href=“headers.html”> <img src="forward.gif"> </a> move on my headers examples <br> • <a href=“spaces.html”> <img src="back.gif"> </a> go back to the spacey examples page <br> • <a href=“mailto:diane@internetsd.com"> <img src="mail.gif"> </a> send me some e-mail!

  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. Image Maps • Earlier you learned how to create an image that doubles as a navigation link by including the <img> tag inside a link <a> 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. Steps to Creating Image Maps • Select an appropriate image • 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 • Connect the image, the mapfile and the gateway script in an HTML file indicating that it’s a map

  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. 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. Image Maps • The basics of imagemaps are easy -- add the proper attribute to the <IMG> 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. 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. 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 they’re 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. Map Tag <map name="name"> <area [shape="shape"] coords="x,y,..." [href=" reference"] [nohref]> </map>

  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. Putting the Image Map Togetherfor a SERVER-SIDE Image Map <html> <head> <title> Server Side Image Map</title> </head> <body> <a href="http://www.internetsd.com/cgi-bin/imagemap/diane/navmap.map"> <img src="navbar.gif" ismap></a> </body> </html>

  20. Server Side Clickable Image Map • http://curry.edschool.virginia.edu/go/WebTools/Imagemap/SSIM.html

  21. Client Side CLICKABLE Image Map • http://curry.edschool.virginia.edu/go/WebTools/Imagemap/CSIM_SSIM.html

  22. Domino.jpg • In my course directory there is a file called domino.jpg http://www.internetsd.com/courses/html1/domino.jpg

  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/ • MapEdit is a graphical editor for World Wide Web image maps (clickable imagemaps). Simple but fully functional and easy to use.

  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. <html> <head> <title>Clickable Imagemap Example</title> </head> <body> <h1 align="center"> clickable imagemap demo file </h1> <p>this html imagemaps samples file demonstrates a simple client side clickable image map</p> <p>click on the two to go to two.html</p> <img src="domino.jpg"> <p>click on the three to go to three.html</p> </body> </html> clickable.html before mapedit

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

  27. three.html <html> <head> <title>this is diane's third html document </title> </head> <body> <h3> third file </h3> <p>here is it, my <b>third</b> html document!!</p> press the back button to return to the clickable image html document! </body> </html>

  28. FYI: AFTER mapedit <html> <head> <title>clickable imagemap example</title> </head> <body> <h1 align="center"> Clickable Imagemap Demo File </h1> <p>This HTML Imagemaps Samples File demonstrates a simple client side clickable image map</p> <p>Click on the TWO to go to two.html</p> <img src="domino.jpg" usemap="#domino"> <p>Click on the THREE to go to three.html</p> <map name="domino"> <area shape="rect" coords="0,0,70,65" href="two.html"> <area shape="rect" coords="2,64,69,126" href="three.html"> <area shape="default" nohref> </map> </body> </html>

  29. Next • Frames

More Related