You are invited to Log in or Register a free Frihost Account!

Image Mapping in HTML

Hi all, I thought I would write a quick guide on how to write an image map html page as used in my site.

I currently only have the homepage as the other pages are on my home computer (currently at work) and will be uplaoded later on tonight.
This can be found here

As you can see it uses one background image and the html maps the links on the page which seem to correspond to the image.

Heres how to do it:

1. create an image in photoshop (others available) that has graphics for your links i.e. text but saved on the image

2. Insert your image onto the page using this code in the body:
<img src="yourimage.jpg" width="800" height="600" border="0" usemap="#Map">

3. In photoshop go to view and turn on ruler bars, change settings to view the pixels on the screen

4. For ease of use, I will explain the 'rect' map function, there are many other like poly and triangle but rect does the job nicely. The rect mapping function maps the top right corner and bottom left corner of a rectangle where the link will be active.

5. In photoshop, use the rulers to find the pixel values in the image where you would like the rectangle to be i.e. over the text or graphic you want linked.

6. Insert in the body of the html the following:
<map name="Map">
<area shape="rect" coords="60,200,340,300" href="linkedpage.html?">

7. Change the coordinates to your own coordinates and the page link to the page you wish to go to when clicked.

8. Save the page, uploaded the pages to server aswell as the background image

This should show the image on the page and also map the links onto the image. I also use tables to align and format the images makes it look a bit more professional.

Hope this helps or inspires some people out there, its a simple technique and creates a clean site.

Your site is good example of image map method.

It is work good in different browsers? or when image placed in table?

Nice idea to experiment with

Related topics
Sim and Sim New Relaunch!
Why You Should Never Use Flash
Don't Use Flash
Inzamam's run out
Problems with my coding... again
What is mambo
Question: multipel background images simultaneously
Image Mapping?
Help me improve it!
Post your Wallpapers
Image <input> with <map>?
Help With Positioning Background Image.
convert photoshop image to html divs (move if needed)
How do I wrap text around an image in html?
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

© 2005-2011 Frihost, forums powered by phpBB.