(the koala book) O'Reilly & Associates, Inc. If the people who will be viewing the image have decent connection speeds, or if you want curvy text or something which cannot be achieved any other way, image maps are great, otherwise you should think twice when using them.
HTML AREA COORDS DOWNLOAD
The cost: a 65K download as opposed to a 15K download. Thus, we now have a nifty graphic thinger with links to the informaion in the Rocker section of the Archives. (This defines a circle around the anarchy symbol.) (These define rectangles around Bibliography and Graphics.) (this defines an irregular hexagon around "Collected Works") (this defines a rectangular polygon- I dont use the rectangle tag because most people use nyetscape) (Here I'm naming the image rockermain.jpg and the map, called rockermap, is inside this html file.) Once I have added all the text that was on the original page, I use the info window(avaliable under the "Window" menu, "Palettes" submenu, "Show Info")to get the coordinates for the area tags(fig 3.) (It may be necessary to move the image around to fit everything.) I only underline the text which will be linked, similar to the way normal hyperlinks are underlined.
Next, I used the type tool to add text to the image(fig 2). As an example, I will use the main page for Rudolph Rocker:įirst, I will open the picture of Rudolph Rocker in Photoshop®, and use the "Canvas Size." command under the "Image" menu to create some space around our image(fig 1). Now we will construct an image map from scratch. The coordinates of a polygon specify its corners you can use as many corners as you like as long as you use at least three. The coordinates for the rectangle should specify the top right and lower left corners.
The coordinates for the circle specify the x and y coordinates of the center of the circle, and its radius. There are supposedly three values for the area attributes, circle, rectangle, and polygon. Now, if we were to put all these tags in an html document, it would look like this:Īny number of area tags can go in between the map tags, but if any of them overlap, the first one will take precendence. This tag defines a circular region centered 20 pixels down and 20 pixles in from the top right corner of the image, with radius 15 pixels, and hyperlinked to a file in the current directory called circle.html. Area tags conatian a shape attribute, which defines the shape of the clickable region, a coord attribute which defines the size and location of each clickable region, and an href attribute which defines the hyperlink for each region. We will need to close the map tag with, but first we must put the area tags inside it to define which parts of the image are clickable, and what happens when they are clicked. this tells the browser to load the image called "fred" and use the image map it will find called "joe." We define "joe" using the map tag, which has a name value equal to "joe," like this. The usemap attribute goes inside the image tag, and its value is the location of the map, like this. Client-side clickable image maps use three special thingies (two are tags-the map tag and the area tag and the other is an attribute-the usemap attribute of the img tag) to let the browser know which parts of an image are linked to what files. Making Image Maps is Fun and Easy.Ĭlient-side clickable image maps are simple to create, and can be created using an html (or any text) editor and a graphics program such as Adobe Photoshop® which will readout x-y coordinates on an image. Although it is much faster to use normal text, image mps offer infinite vairety in the appearance of the text or objects to be linked. This can be used when there is an image of a group of people, and each person has a link, or when there is an image with text which has links attached. With image maps each part of an image can have a differnt hyperlink attached to it. Image Maps are nifty, if gratuitious and graphics-intensive, ways to set up hyperlinks.
HTML AREA COORDS HOW TO
How To Make IMAGE MAPS What are Image Maps?
0 kommentar(er)
