Freeola Internet Get Dotted Domains Blog Guides Chat
Menu

Viewing Thread:
'HTML Image Maps'

Thu 16/11/06 at 19:06:
cjh
Regular
"It goes so quickly"
Posts: 4,083
Making a single image become multiple hyperlinks.

HTML links are a pretty basic part of a web page. Weather they appear as a text link, or a picture that a user can click on, they allow web pages to be visited with ease. But an image doesnít have to be restricted to a single clickable link.

An image map is a single picture on a web page that can contain multiple links to different locations, dividing the image up in to separate click enabled regions. Such an example can be seen on the GetDotted web site, which contains a banner for Freeola, which links to the home page, broadband, dial-up and hosting web pages, via a single image, using an image map.

The image map is put together by the web browser, using HTML code to tell it which parts of the image link to where, as well as what shape the clickable region should be in. This is done using coordinates, in the same way as you may do when looking at a real map (hence the name image map).

Most image editing programs will be able to tell you the coordinates of any part of a particular image. One example being Microsoft Paint (which comes with Windows) that will show you the coordinates for a particular area when you point your cursor over it, displaying them in the X and Y coordinate format, with the X referring to the number of pixels from the far left, and the Y referring to the number of pixels from the top, as shown here. In this example, the cursor is pointed at the top of the triangle, and the coordinates are shown in the task bar at the bottom, which are shown as 64, 101, which translates to meaning X: 64 Y: 101. Other image editors work in the same manor, displaying the coordinates in the task bar somewhere as you move your mouse over the image.

This little article will provide the basics for you to put together your own image map. You will need to make a note of the coordinates when plotting your image map, as mentioned above, as these will be used by the web browser to put the regions together.

The basics

As mentioned above, an image map is made up of a single image (be it a PNG, GIF or JPG) and some HTML code, which tells the web browser how the image is to be divided up, as well as which region links where.

This is done using the and HTML elements (or tags). The element is used to group together the elements, so that it may be referred to by an image via a unique name (or identification). This name will need to be placed within the element as the value of the name attribute, for example, name="firstmap">.

The element contains the information about each section of the image, such as its target web address, shape and coordinates. You will need to use one element for each link and section - for example, if you want to have four different sections of an image to be links, you would need to add four separate elements and enclose them within a element.

There are three different types of shape which can be used for an image map, which are a circle, a rect and a poly. Each shape is made up from the coordinates of the image being used. To tell the element which shape you want, you will need to use the shape attribute, for example, shape="rect"> for a square or rectangle (four sided shape), shape="circle"> for a circle shape, or shape="poly"> for a polygon (a shape with many sides).

Each shape will be defined by its associated coordinates, which are placed within the coords attribute, and separated with a comma. Each set of shape coordinates are put together differently, so weíll quickly run through how this is done.

Using the circle shape.

The circle shape is set up using three coordinate values, the first and second being the X and Y coordinates for the centre point of the circle, the third being the radius of the circle. The radius is the mathematical term used to say ďhalf the diameterĒ or ďthe length from the centre to the edgeĒ.

In the example linked above, the first coordinate is the X (how many pixels it appears from the left), which in this case is 53 pixels. The second coordinate is the Y (how many pixels from the top), which in this case is 51 pixels. The third and final coordinate is the radius, which in this case is 38 pixels. The web browser will then use these to draw the circle shape, and the HTML for this circle shape is:

coord="53,51,38">

Using the rec shape.

The rec shape is set up using four coordinate values, the first and second being the X and Y coordinates for one corner of the shape (in this case, 144 and 28), and the third and forth being the X and Y coordinates for another corner of the shape (in this case, 372 and 115).

The corners will need to be either the:
left top / right bottom,
right top / left bottom,
right bottom / left top,
left bottom / right top.

The web browser wonít care which you choose, because it will draw the shape in the same way, but it is important that you use the X and Y coordinates in the right order, which is pixels from the left first, pixels from the top second.

For simplicity sake, you should just go for the common left top / right bottom approach. The web browser will then use these to draw the four-sided shape, with the HTML code looking like this:

coords="144,28,372,115">

Using the poly shape.

The poly shape is set up using an even number of coordinate values, be it six, eight, twelve or twenty four, which are grouped together as X and Y points. This is to allow more freedom when creating a shape, and you can basically draw a series of straight lines in any manor you like to create your region. For this example, weíll just use a basic triangle shape, but you can continue the set of coordinates to make a more complicated region if needed.

To plot a poly shape, you have to plot each set of X and Y coordinates so that they draw a straight line, one after the other, just like dot to dot. When planning out your image map, pick a starting point, and draw straight lines around the region you want, marking each change of direction with a number, so that you end up with coordinates for X1 Y1, X2 Y2, X3 Y3 and so on. You will then need to add each set of coordinates in to the HTML code. Once the web browser gets to the last set of coordinates, itíll draw one final line back to the first set, so as to complete the shape.

Our example here shows that we will start from the top of the triangle, and work in a clockwise manor. X1 Y1 are the coordinates for the top, X2 Y2 are the coordinates for the bottom right corner of the triangle, and X3 Y3 are the coordinates for the bottom left of the triangle. Because X3 Y3 are the final set or coordinates in this example, the web browser will then draw the final line back to X1 Y1, thus completing the triangle shape.

With our triangle example code, the coordinates would be:

1: 64,101
2: 119,156
3: 9,156
4: browser automatically goes back to 1

Ö with the HTML code looking like this:

coords="64,101, 119,156, 9,156">

Using the default.

One final shape value that can be used, but which isnít really a shape, is the default value. This will apply to any part of the image map that doesnít have itís own shape applied above, and is basically a catch-all approach, meaning the whole image becomes clickable. The HTML for this is:

shape="default">

But donít rely on this too much, because the worlds most widely used web browser, Internet Explorer, donít support this tag.

So, put together with the element, we would have the HTML code:










Adding the rest of the details.

Each element will need to contain a little more information to make it work, which include a href (link destination), title and alt attributes. The value of these will depend on where you want a particular region to link to, as well the text you want to associate with it. Such examples could be (with coordinates left out to save space):


href="home.htm" title="Home Page" alt="Home.">
href="contact.htm" title="Contact Us" alt="Contact.">
href="links.htm" title="See our links" alt="Links.">


The href attribute can contain full web addresses, as well as anchor links (addresses with a hash # at the end). The alt attribute is to cater for web browser that canít see the image (such as a screen reader) and the title attribute creates a tiny tool-tip of text when a user moves the mouse over the region, which can give a little more information about where the link heads to.

Putting it all together.

With the shapes having been set out for our image map, we can put it all together, with the HTML looking something like this:



Link 2.
Link 3.
Link 4.
Link 1.



In the above example, this set of elements have been grouped together by the element, and been given the name firstmap. When you want to apply this image map to an image, you simply tell it to do so with the usemap attribute within the desired element, as shown below (be sure to include the hash #):


circle, rectangle, triangle.usemap="#firstmap">


This will tell the web browser that the above image is to become an image map, and that the regions should be applied in accordance with the code within the element that is named firstmap.

You can see this example online as a web page.

For those of you who like to write in xHTML Ö

One final note, if youíre writing out your code using xHTML syntax, you will also need to add the id attribute to your element, to reference the same value as the name attribute, such as:

id="firstmap">

And there you have it, a relatively easy way to creating your own image map. If you get stuck, as always, just head on over to the Freeola web forum, and someone may be able to assist you.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
There have been no replies to this thread yet.
Thu 16/11/06 at 19:06:
cjh
Regular
"It goes so quickly"
Posts: 4,083
Making a single image become multiple hyperlinks.

HTML links are a pretty basic part of a web page. Weather they appear as a text link, or a picture that a user can click on, they allow web pages to be visited with ease. But an image doesnít have to be restricted to a single clickable link.

An image map is a single picture on a web page that can contain multiple links to different locations, dividing the image up in to separate click enabled regions. Such an example can be seen on the GetDotted web site, which contains a banner for Freeola, which links to the home page, broadband, dial-up and hosting web pages, via a single image, using an image map.

The image map is put together by the web browser, using HTML code to tell it which parts of the image link to where, as well as what shape the clickable region should be in. This is done using coordinates, in the same way as you may do when looking at a real map (hence the name image map).

Most image editing programs will be able to tell you the coordinates of any part of a particular image. One example being Microsoft Paint (which comes with Windows) that will show you the coordinates for a particular area when you point your cursor over it, displaying them in the X and Y coordinate format, with the X referring to the number of pixels from the far left, and the Y referring to the number of pixels from the top, as shown here. In this example, the cursor is pointed at the top of the triangle, and the coordinates are shown in the task bar at the bottom, which are shown as 64, 101, which translates to meaning X: 64 Y: 101. Other image editors work in the same manor, displaying the coordinates in the task bar somewhere as you move your mouse over the image.

This little article will provide the basics for you to put together your own image map. You will need to make a note of the coordinates when plotting your image map, as mentioned above, as these will be used by the web browser to put the regions together.

The basics

As mentioned above, an image map is made up of a single image (be it a PNG, GIF or JPG) and some HTML code, which tells the web browser how the image is to be divided up, as well as which region links where.

This is done using the and HTML elements (or tags). The element is used to group together the elements, so that it may be referred to by an image via a unique name (or identification). This name will need to be placed within the element as the value of the name attribute, for example, name="firstmap">.

The element contains the information about each section of the image, such as its target web address, shape and coordinates. You will need to use one element for each link and section - for example, if you want to have four different sections of an image to be links, you would need to add four separate elements and enclose them within a element.

There are three different types of shape which can be used for an image map, which are a circle, a rect and a poly. Each shape is made up from the coordinates of the image being used. To tell the element which shape you want, you will need to use the shape attribute, for example, shape="rect"> for a square or rectangle (four sided shape), shape="circle"> for a circle shape, or shape="poly"> for a polygon (a shape with many sides).

Each shape will be defined by its associated coordinates, which are placed within the coords attribute, and separated with a comma. Each set of shape coordinates are put together differently, so weíll quickly run through how this is done.

Using the circle shape.

The circle shape is set up using three coordinate values, the first and second being the X and Y coordinates for the centre point of the circle, the third being the radius of the circle. The radius is the mathematical term used to say ďhalf the diameterĒ or ďthe length from the centre to the edgeĒ.

In the example linked above, the first coordinate is the X (how many pixels it appears from the left), which in this case is 53 pixels. The second coordinate is the Y (how many pixels from the top), which in this case is 51 pixels. The third and final coordinate is the radius, which in this case is 38 pixels. The web browser will then use these to draw the circle shape, and the HTML for this circle shape is:

coord="53,51,38">

Using the rec shape.

The rec shape is set up using four coordinate values, the first and second being the X and Y coordinates for one corner of the shape (in this case, 144 and 28), and the third and forth being the X and Y coordinates for another corner of the shape (in this case, 372 and 115).

The corners will need to be either the:
left top / right bottom,
right top / left bottom,
right bottom / left top,
left bottom / right top.

The web browser wonít care which you choose, because it will draw the shape in the same way, but it is important that you use the X and Y coordinates in the right order, which is pixels from the left first, pixels from the top second.

For simplicity sake, you should just go for the common left top / right bottom approach. The web browser will then use these to draw the four-sided shape, with the HTML code looking like this:

coords="144,28,372,115">

Using the poly shape.

The poly shape is set up using an even number of coordinate values, be it six, eight, twelve or twenty four, which are grouped together as X and Y points. This is to allow more freedom when creating a shape, and you can basically draw a series of straight lines in any manor you like to create your region. For this example, weíll just use a basic triangle shape, but you can continue the set of coordinates to make a more complicated region if needed.

To plot a poly shape, you have to plot each set of X and Y coordinates so that they draw a straight line, one after the other, just like dot to dot. When planning out your image map, pick a starting point, and draw straight lines around the region you want, marking each change of direction with a number, so that you end up with coordinates for X1 Y1, X2 Y2, X3 Y3 and so on. You will then need to add each set of coordinates in to the HTML code. Once the web browser gets to the last set of coordinates, itíll draw one final line back to the first set, so as to complete the shape.

Our example here shows that we will start from the top of the triangle, and work in a clockwise manor. X1 Y1 are the coordinates for the top, X2 Y2 are the coordinates for the bottom right corner of the triangle, and X3 Y3 are the coordinates for the bottom left of the triangle. Because X3 Y3 are the final set or coordinates in this example, the web browser will then draw the final line back to X1 Y1, thus completing the triangle shape.

With our triangle example code, the coordinates would be:

1: 64,101
2: 119,156
3: 9,156
4: browser automatically goes back to 1

Ö with the HTML code looking like this:

coords="64,101, 119,156, 9,156">

Using the default.

One final shape value that can be used, but which isnít really a shape, is the default value. This will apply to any part of the image map that doesnít have itís own shape applied above, and is basically a catch-all approach, meaning the whole image becomes clickable. The HTML for this is:

shape="default">

But donít rely on this too much, because the worlds most widely used web browser, Internet Explorer, donít support this tag.

So, put together with the element, we would have the HTML code:










Adding the rest of the details.

Each element will need to contain a little more information to make it work, which include a href (link destination), title and alt attributes. The value of these will depend on where you want a particular region to link to, as well the text you want to associate with it. Such examples could be (with coordinates left out to save space):


href="home.htm" title="Home Page" alt="Home.">
href="contact.htm" title="Contact Us" alt="Contact.">
href="links.htm" title="See our links" alt="Links.">


The href attribute can contain full web addresses, as well as anchor links (addresses with a hash # at the end). The alt attribute is to cater for web browser that canít see the image (such as a screen reader) and the title attribute creates a tiny tool-tip of text when a user moves the mouse over the region, which can give a little more information about where the link heads to.

Putting it all together.

With the shapes having been set out for our image map, we can put it all together, with the HTML looking something like this:



Link 2.
Link 3.
Link 4.
Link 1.



In the above example, this set of elements have been grouped together by the element, and been given the name firstmap. When you want to apply this image map to an image, you simply tell it to do so with the usemap attribute within the desired element, as shown below (be sure to include the hash #):


circle, rectangle, triangle.usemap="#firstmap">


This will tell the web browser that the above image is to become an image map, and that the regions should be applied in accordance with the code within the element that is named firstmap.

You can see this example online as a web page.

For those of you who like to write in xHTML Ö

One final note, if youíre writing out your code using xHTML syntax, you will also need to add the id attribute to your element, to reference the same value as the name attribute, such as:

id="firstmap">

And there you have it, a relatively easy way to creating your own image map. If you get stuck, as always, just head on over to the Freeola web forum, and someone may be able to assist you.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola is a UK internet service provider offering the best value and extensive free services. Please compare our domain name registration prices or check out our UK high speed internet access. If you are in business please see examples of our free hosting at Freeola.com/customer-sites.

Safe and Secure Payment

Livechat - loading