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
![Page 1: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/1.jpg)
© 2002 D & D Enterprises1
Linking Images
For Navigation&
Clickable Image Maps
![Page 2: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/2.jpg)
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
![Page 3: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/3.jpg)
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
![Page 4: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/4.jpg)
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
![Page 5: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/5.jpg)
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/
![Page 6: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/6.jpg)
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>
![Page 7: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/7.jpg)
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.
![Page 8: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/8.jpg)
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!
![Page 9: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/9.jpg)
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
![Page 10: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/10.jpg)
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
![Page 11: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/11.jpg)
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
![Page 12: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/12.jpg)
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
![Page 13: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/13.jpg)
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
![Page 14: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/14.jpg)
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.
![Page 15: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/15.jpg)
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
![Page 16: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/16.jpg)
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
![Page 17: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/17.jpg)
17 © 2002 D & D Enterprises
Map Tag
<map name="name"><area [shape="shape"] coords="x,y,..."
[href=" reference"] [nohref]></map>
![Page 18: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/18.jpg)
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
![Page 19: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/19.jpg)
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>
![Page 20: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/20.jpg)
20 © 2002 D & D Enterprises
Server Side Clickable Image Map
http://curry.edschool.virginia.edu/go/WebTools/Imagemap/SSIM.html
![Page 21: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/21.jpg)
21 © 2002 D & D Enterprises
Client Side CLICKABLE Image Map
http://curry.edschool.virginia.edu/go/WebTools/Imagemap/CSIM_SSIM.html
![Page 22: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/22.jpg)
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
![Page 23: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/23.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.
![Page 24: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/24.jpg)
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
![Page 25: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/25.jpg)
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>
![Page 26: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/26.jpg)
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>
![Page 27: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/27.jpg)
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>
![Page 28: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/28.jpg)
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>
![Page 29: Linking Images](https://reader036.vdocuments.site/reader036/viewer/2022062408/56813419550346895d9b06b7/html5/thumbnails/29.jpg)
29 © 2002 D & D Enterprises
Next
Frames