Image Mapping HTML Tutorials

How To Create Client-Side Image Maps
Learn how to make an area on an image a clickable link.

Creating Server-Side Image Maps
Learn how to create server-side image maps in this tutorial.

How To Hack The Coordinates
Learn how to get the coordinates for your client-side image map the slick way, with this tutorial.

Image Attributes
There are main attributes we can add to the image tag which describe or alter the appearance of the image.

Inserting Images and Backgrounds
We will learn how to put images into our page.

Image Maps
Learn how to create clickable regions in an image. Image maps create clickable regions in an image. This is very helpful for a navigation bar. This method is an alternative to slicing up the image into many parts. If you don't want to use Javascript in order to have image rollovers, then image maps is the best route to go.

Image Maps
Image maps create clickable regions in an image. This is very helpful for a navigation bar. This method is an alternative to slicing up the image into many parts. If you don't want to use Javascript in order to have image rollovers, then image maps is the best route to go.

Image Map
There are in fact two major types of Image Maps: Server Side: This is the older method of doing image maps. The reason for finding out what type of server you are on is so you know what format to make your map files in. Client Side: These maps are implemented by placing the map coordinates in your document's HTML code. This method is supported by most modern browsers. It is much more efficient than the Server Side map in that you do not transmit mouse coordinates back to the server. Most of this page will be dealing with this type of mapping.

Image Maps in HTML
Create a client side image map in HTML using this tutorial. Here you'll learn where to place the shapes and coordinates details in an area tag.

Client Side Image Maps
Image maps aren't as bad as they seem, at least if you use a client side image map using HTML rather than a cgi program. I may add a section on using a cgi driven image map later on, but for now, lets look at one that just uses HTML and an image!

Image Maps
An image map is an image that has been divided into regions, or "hotspots"; when a hotspot is clicked an action occurs, for example a new file opens. The image found at the bottom is an example of an image map.

Client Side Image Map
A client-side image map is an image map that is run by the browser rather than a CGI. What happens is you will provide all the information required to run the map in your HTML document. That's why it's called a client-side map.

Fake Image Map
It is very popular, mainly because you can set sections of the fake map to be animated.

Image Map Rollover
Use an image map to set section apart to roll over.