How do I create an image map for my Web page?
I am trying to make a web page and am having trouble with the HTML. I want to make some links at different places on the picture on the front page. Could you help me with the code? Right now the whole picture is a link, but I would like to make the ENTER sign a link as well. If you could just point me in the right direction
What you're talking about is what we Web folk call an image map, and they've been around in the Web world for years, albeit never too fabulously labeled or explained. The trick is that you need to do a fair bit of HTML footwork to get them to actually work properly...
There are two parts to an image map (and in this explanation, I'm only going to talk about cilent-side image maps. Server side image maps are so crufty and old that I haven't seen them used on a site in years) the map itself, which identifies regions and assigns a target URL to each, and the additional attribute on the img tag that tells the Web browser that there's an associated map.
To show you how this works, let's pick a graphical element that you might use on your own page. For fun, I'll pick the following image from the White House Web site:
I include this image here with some basic HTML:
alt="whitehouse" height="267" width="400" />
To turn it into a clickable element, I wrap the img tag with an a href. That's still pretty rudimentary. Now, let's build an image map on top of the photo...
You can build these coordinates by hand - the top left is 0,0 and you measure across, then down, so the center of this picture will be 400/2, 267/2, or 200,133 - but that's totally barmy, in my opinion. Instead, there are some nice shareware apps you can download to make things a lot easier, and every halfway decent Web page editor has a built-in image map utility too, some of which are wonderfully sophisticated.
Whether you use the tool or not, an image map itself is a set of regions, coordinates that define those regions, and associated hypertext references. The three primary regions you can work with are RECT for rectangles, CIRCLE and POLYGON. For simplicity, most people work with rectangles, because you need only define the top left and bottom right points, so it's pretty easy.
For demonstration purposes, let's take the image of the White House and make it so that clicking on the bottom left quarter takes you to the Democratic Party web site, clicking on the bottom right quarter takes you to the Republican National Committee site, and the top half of the image takes you to the White House site directly. Got it?
Since we've already figured out that the center point is 200,133, and that the bottom right corner of the entire image is the exact dimensions of the image, or 400,267, that means that the top half can be represented as a rectangle with its top left coordinate of 0,0 and its bottom right coordinate as 400,133. The bottom left rectangle is 0,133 and 200,267 while the bottom right rectangle starts at 200,133 and ends at 400,267. I hope that makes sense!
Now we're ready to turn these coordinates into an actual image map on a Web page!
<area shape="rect" coords="0,0,400,133" alt="top box"
<area shape="rect" coords="0,133,200,267" alt="bottom left"
<area shape="rect" coords="200,133,400,267" alt="bottom right"
Notice here that the image map gets a unique name - in this case testmap - and that each shape has all four coordinates specified in the coords attribute and that each has an href just like the a tag has.
That's most of the work (and the hardest part, frankly) so now we just need to associate the image with the new image map. That's done by adding the new usemap attribute to the img, making sure to prepend a # to the name. So the actual image inclusion tag looks like this now:
alt="whitehouse" height="267" width="400" usemap="#testmap" border="0" />
Put it all together and here's a version of this image that has the three regions defined. Click on a different corner to see what happens!
I hope that gets you moving in the right direction with image maps. If you want more information, may I suggest my popular book Creating Cool Web Sites as a good companion? In any case, good luck!
✔ How to Create Predefined Google Image Search Links?
Thanks for the Amazon URL [see Creating Amazon Search Links]. That worked beautifully. In fact, I sent you $5.00 for coffee in thanks....✔ Can I embed a Facebook search box on my blog site?
I've seen your articles about how to add a Twitter or Google search box on a Web page, but I have a tougher...✔ Can I use CSS for drop shadows on my blog?
I want to give my site a bit of a facelift and add some neat graphical elements. One of which is drop shadows....✔ How can I embed interactive photo panoramas on my site/blog?
I read through your blog entry about how to take panoramic photos with iOS 6 and an iPhone 5 and got enthused. I've...✔ How can I create a Twitter search URL shortcut?
I'd like to add a few Twitter search links to my Web site. Is that possible, or does Twitter prohibit this sort of...
Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
I do have a comment, now that you mention it!
Check This Out Too...
Look for Answers
All Our Categories
Apple iPad Help
Articles and Reviews
Auctions and Online Shopping
Blogs and Blogging
Building Web Site Traffic
Business and Management
Computer and Internet Basics
d) None of the Above
Google Gmail Help
Google Plus Help
Industry News and Trade Shows
iPhone and Cell Phone Help
iPod, Sony PSP and MP3 Player Help
Kindle Fire Help
Mac OS X Help
Pay Per Click (PPC) Advertising
Search Engine Optimization (SEO)
Shell Script Programming
Tech Support Video Help
The Writing Business
Twitter, LinkedIn and Social Network Help
Unix and Linux Help
Video Game Tips and Help
Windows PC Help
Find Me on Google+
ADT on G+