linking images
DESCRIPTION
Linking Images. For Navigation & Clickable Image Maps. 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. Misc. Image Manipulation. - PowerPoint PPT PresentationTRANSCRIPT
© 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
3 © 2002 D & D Enterprises
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 © 2002 D & D Enterprises
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
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 © 2002 D & D Enterprises
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>
7 © 2002 D & D Enterprises
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.
8 © 2002 D & D Enterprises
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!
9 © 2002 D & D Enterprises
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
10 © 2002 D & D Enterprises
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
11 © 2002 D & D Enterprises
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
12 © 2002 D & D Enterprises
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
13 © 2002 D & D Enterprises
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
14 © 2002 D & D Enterprises
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.
15 © 2002 D & D Enterprises
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
16 © 2002 D & D Enterprises
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 © 2002 D & D Enterprises
Map Tag
<map name="name"><area [shape="shape"] coords="x,y,..."
[href=" reference"] [nohref]></map>
18 © 2002 D & D Enterprises
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
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 © 2002 D & D Enterprises
Server Side Clickable Image Map
http://curry.edschool.virginia.edu/go/WebTools/Imagemap/SSIM.html
21 © 2002 D & D Enterprises
Client Side CLICKABLE Image Map
http://curry.edschool.virginia.edu/go/WebTools/Imagemap/CSIM_SSIM.html
22 © 2002 D & D Enterprises
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
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.
24 © 2002 D & D Enterprises
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>
29 © 2002 D & D Enterprises
Next
Frames