![]() |
|
How To Make An ImagemapChapter 2: Client-Side ImagemapsClient-Side imagemaps are processed entirely in the user's browser, are coded using just plain HTML, and what's more can give visual cues to the user as he moves the mouse over them.Below is an actual working imagemap (assuming you have a JavaScript enabled web browser). Move the mouse over the different colored regions, and try clicking on them too, to see it working. (Actually works!)
Here is the actual exact HTML code that was used to produce this imagemap: (If you're not familiar with HTML or just want to learn more, then get yourself a good HTML Tutorial). <IMG SRC="imagemap.gif" USEMAP="#mapname" WIDTH="250" HEIGHT="250" BORDER="1"> <MAP NAME="mapname"> <AREA SHAPE="rect" COORDS="25,25,74,74" HREF="javascript:alert('You clicked on Red');" ALT="Red"> <AREA SHAPE="poly" COORDS="75,25,124,25,124,124,25,124,25,75,75,75" HREF="javascript:alert('You clicked on Green');" ALT="Green"> <AREA SHAPE="circle" COORDS="174,174,50" HREF="javascript:alert('You clicked on Blue');" ALT="Blue"> </MAP> Now this example uses JavaScript to display various messages when you click, so for simplicity sake, let's look at what the HTML code would look like, for one that simply linked each region to a different web page: <IMG SRC="imagemap.gif" USEMAP="#mapname" WIDTH="250" HEIGHT="250" BORDER="1"> <MAP NAME="mapname"> <AREA SHAPE="rect" COORDS="25,25,74,74" HREF="red.html" ALT="Red"> <AREA SHAPE="poly" COORDS="75,25,124,25,124,124,25,124,25,75,75,75" HREF="green.html" ALT="Green"> <AREA SHAPE="circle" COORDS="174,174,50" HREF="blue.html" ALT="Blue"> </MAP> Let's run through the code quickly:
The traditional way is load the image into a paint program and try to trace out coordinates with the mouse, write them down as you go, and then use that information to write your HTML. I suspect that I know what you're thinking... that's too much like hard work! And I agree, it is for any non-trivial imagemap. Fortunately, there is a better way which I'll show you in the next chapter.
Related Software:
|
|||||||||||||||||||||||||||||||||||||||||||
| Privacy Terms Of Use Copyright © 2005-2008, Answers 2000 Limited With any business, it is up to the individual owner of said business to ensure the success of the business. You may make more or less than any sample figures or results that might be quoted on our web sites or other publications. All business involves risk, and many businesses do not succeed. Further, Answers 2000 Limited does NOT represent that any particular individual or business is typical, or that any results or experiences achieved by any particular individual/business is necessarily typical. In Association With Amazon.com All trademarks are property of their respective owners. All third party content and adverts are copyright of their respective owners. Some graphics on our web sites are Copyright (C) 1997-2000 Hemera Technologies Inc., and used under license. All such pictures are provided for viewing purposes only and are not to be saved or downloaded. All such pictures of recognizable individuals are models and used for illustrative purposes only, and not meant to imply any association or endorsement of said individual with any product or service. |