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

© 2002 D & D Enterprises1

Linking Images

For Navigation&

Clickable Image Maps

2 © 2002 D & D Enterprises

Misc. Image Manipulation

You can put an image inside of an anchor <a href> and you will probably want to turn off the image borderExample:

http://www.internetsd.com/courses/html1/imagelink.html

http://www.boutell.com/mapedit/


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


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


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/



More Navigation

After getting the structure input, add some anchors to the images to activate themThe 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:[email protected]">

<img src="mail.gif"> </a>


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 iconOr you can have the text outside the anchor so only the icon serves as a hot spot.


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:[email protected]"> <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:[email protected]"> <img src="mail.gif"> </a> send me some e-mail!


Check Out Navigation Links

Open the Netscape Web BrowserOpen 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 pageshttp://www.internetsd.com/diane/about.html




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> tagBy 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


Steps to Creating Image Maps

1. Select an appropriate image2. 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 it’s a map


Image Maps

In image maps different parts of the image activate different linksNOTE: 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 presentationIt is important that you create a text only equivalent


Image Maps

Allow you to create sophisticated user interfaces with click-able imagesServer 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


Image Maps

The basics of imagemaps are easy -- add the proper attribute to the <IMG> tagT-H-E-Nmake 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.


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 selectedPhotographs are difficult because their elements blend together and are often of unusual shape


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


Map Tag

<map name="name"><area [shape="shape"] coords="x,y,..."

[href=" reference"] [nohref]></map>


Format

/cgi-bin/image … the imagemap program script/user-dir/image.map ... the map file with coordinates/userdir/image.gif ... the gif image file


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>


Server Side Clickable Image Map

http://curry.edschool.virginia.edu/go/WebTools/Imagemap/SSIM.html


Client Side CLICKABLE Image Map

http://curry.edschool.virginia.edu/go/WebTools/Imagemap/CSIM_SSIM.html


Domino.jpg

In my course directory there is a file called domino.jpg

http://www.internetsd.com/courses/html1/domino.jpg


Domino.jpg Coordinates

We have a graphic file: domino.jpgWe 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.



MapEdit

Start the MapEdit softwareStep by Step Guided Practice

Graphic File: domino.jpg

HTML File: clickable.html

HTML File: two.html

HTML File: three.html

clickable.html before 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 asimple 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>

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>

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>

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 asimple 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>


Next

Frames

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

Documents

d d enterprises

image map slide

clicked image

image map server

entire image

appropriate image

gif image file slide

image map structure