GetDotted Domains

Viewing Thread:
"HTML Image Maps"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Thu 16/11/06 at 19:06
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 <map> and <area> HTML elements (or tags). The <map> element is used to group together the <area> 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 <map> element as the value of the name attribute, for example, <map [B]name="[I]firstmap[/I]"[/B]>.

The <area> 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 <area> 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 <area> elements and enclose them within a <map> 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 <area> element which shape you want, you will need to use the shape attribute, for example, <area [B]shape="[I]rect[/I]"[/B]> for a square or rectangle (four sided shape), <area [B]shape="[I]circle[/I]"[/B]> for a circle shape, or <area [B]shape="[I]poly[/I]"[/B]> 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:

<area shape="circle" [B]coord="[U]53,51[/U],[U]38[/U]"[/B]>

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:

<area shape="rect" [B]coords="[U]144,28[/U],[U]372,115[/U]"[/B]>

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:

<area shape="poly" [B]coords="[U]64,101[/U], [U]119,156[/U], [U]9,156[/U]"[/B]>

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:

<area [B]shape="default"[/B]>

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 <map> element, we would have the HTML code:


<map name="firstmap">
<area shape="rect" coords="144,28,372,115">
<area shape="circle" coords="53,51,38">
<area shape="poly" coords="64,101,119,156,9,156">
<area shape="default">
</map>


Adding the rest of the details.

Each <area> 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):


<area shape="rect" [B]href="[I]home.htm[/I]" title="[I]Home Page[/I]" alt="[I]Home.[/I]"[/B]>
<area shape="circle" [B]href="[I]contact.htm[/I]" title="[I]Contact Us[/I]" alt="[I]Contact.[/I]"[/B]>
<area shape="poly" [B]href="[I]links.htm[/I]" title="[I]See our links[/I]" alt="[I]Links.[/I]"[/B]>


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:


<map name="firstmap">
<area shape="rect" coords="144,28,372,115" href="#p2" title="Rectangle" alt="Link 2.">
<area shape="circle" coords="54,52,38" href="#p3" title="Circle" alt="Link 3.">
<area shape="poly" coords="64,101,119,156,9,156" href="#p4" title="Triangle" alt="Link 4.">
<area shape="default" href="#p1" title="Rest of image" alt="Link 1.">
</map>


In the above example, this set of <area> elements have been grouped together by the <map> 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 <img> element, as shown below (be sure to include the hash #):


<img src="firstmap.png" alt="circle, rectangle, triangle." [B]usemap="#[I]firstmap[/I]"[/B]>


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 <map> 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 <map> element, to reference the same value as the name attribute, such as:

<map name="firstmap" [B]id="firstmap"[/B]>

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
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 <map> and <area> HTML elements (or tags). The <map> element is used to group together the <area> 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 <map> element as the value of the name attribute, for example, <map [B]name="[I]firstmap[/I]"[/B]>.

The <area> 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 <area> 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 <area> elements and enclose them within a <map> 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 <area> element which shape you want, you will need to use the shape attribute, for example, <area [B]shape="[I]rect[/I]"[/B]> for a square or rectangle (four sided shape), <area [B]shape="[I]circle[/I]"[/B]> for a circle shape, or <area [B]shape="[I]poly[/I]"[/B]> 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:

<area shape="circle" [B]coord="[U]53,51[/U],[U]38[/U]"[/B]>

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:

<area shape="rect" [B]coords="[U]144,28[/U],[U]372,115[/U]"[/B]>

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:

<area shape="poly" [B]coords="[U]64,101[/U], [U]119,156[/U], [U]9,156[/U]"[/B]>

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:

<area [B]shape="default"[/B]>

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 <map> element, we would have the HTML code:


<map name="firstmap">
<area shape="rect" coords="144,28,372,115">
<area shape="circle" coords="53,51,38">
<area shape="poly" coords="64,101,119,156,9,156">
<area shape="default">
</map>


Adding the rest of the details.

Each <area> 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):


<area shape="rect" [B]href="[I]home.htm[/I]" title="[I]Home Page[/I]" alt="[I]Home.[/I]"[/B]>
<area shape="circle" [B]href="[I]contact.htm[/I]" title="[I]Contact Us[/I]" alt="[I]Contact.[/I]"[/B]>
<area shape="poly" [B]href="[I]links.htm[/I]" title="[I]See our links[/I]" alt="[I]Links.[/I]"[/B]>


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:


<map name="firstmap">
<area shape="rect" coords="144,28,372,115" href="#p2" title="Rectangle" alt="Link 2.">
<area shape="circle" coords="54,52,38" href="#p3" title="Circle" alt="Link 3.">
<area shape="poly" coords="64,101,119,156,9,156" href="#p4" title="Triangle" alt="Link 4.">
<area shape="default" href="#p1" title="Rest of image" alt="Link 1.">
</map>


In the above example, this set of <area> elements have been grouped together by the <map> 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 <img> element, as shown below (be sure to include the hash #):


<img src="firstmap.png" alt="circle, rectangle, triangle." [B]usemap="#[I]firstmap[/I]"[/B]>


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 <map> 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 <map> element, to reference the same value as the name attribute, such as:

<map name="firstmap" [B]id="firstmap"[/B]>

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 & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

First Class!
I feel that your service on this occasion was absolutely first class - a model of excellence. After this, I hope to stay with Freeola for a long time!
Easy and free service!
I think it's fab that you provide an easy-to-follow service, and even better that it's free...!
Cerrie

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.