Wickham's HTML & CSS tutorial

Sitemap | Home | Search

Image maps

View in Firefox, Safari, Opera and IE but IE6 often needs different solutions. In general IE7 and IE8 display like Firefox apart from the HTML5 and CSS3 features. The IE9 & above updates are mainly related to HTML 5 and CSS3 issues and display to a large extent like other main browsers. Google Chrome is based on the same WebKit engine as Safari.

Some of the examples are provided just to show problems, others show solutions that work in most major browsers. Use the example that suits you.
red icon problems   gold icon warning: works in some situations or some browsers or needs care to display as you wish   green icon OK in Firefox, Safari, Opera, Google Chrome and IE


An image map could be used for a photo with several people so that when a mouse is hovered over each person a link is shown to further information about that person. Similarly, if you show a map of a country with states, counties or towns marked, then each area can have a separate link to provide further information.
It is important to have associated text which makes the viewer realise that moving a mouse over the area will show links.

1 green icon A basic image map is shown below where each swan provides a different link:-

Male swan link to Introduction Female swan link to General Advice swans

The code is:-
<map id="swans" name="swans">
<area shape="rect" href="introduction.php" coords="10,1,75,30" alt="Male swan link to Introduction">
<area shape="rect" href="generaladvice.php" coords="95,20,170,50" alt="Female swan link to General Advice">
</map>
<img usemap="#swans" src="images/swans200x50.jpg" alt="swans">

The example above uses id="swans" and name="swans" because Firefox does not work with id="". Both IE and Firefox work with name="" so id="" could have been omitted. However, name="" does not validate with XHTML 1.1.
See Bernie Zimmermann for reasons why id="" does not work in Firefox but omitting id="" gives a validation error.
However, name="" does validate with Doctype XHTML 1.0 Transitional and HTML 4.01 which has been used for this page.

The following codes are for rectangles, polygons, circles and points.
The first two numbers separated by a comma are always for the top left; the first being x or the distance in px from the left of the image; the second being y or the distance down from the top.
Rectangles only need one more pair of numbers for the bottom right corner.
Polygons have varying pairs of numbers depending on how many corners they have, working clockwise, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5. You can add x1, y1 at the end to close the polygon, but browsers do this automatically.
Circles have three numbers, the first two being the coordinates of the centre and the third being the radius in px.
A point just needs one pair of coordinates.

<area shape="rect" href="mypage.html" coords="20,150,240,180">
<area shape="polygon" href="page1.html" coords="9,115,86,79,98,116,69,131,86,175,48,206">
<area shape="circle" href="page2.html" coords="230,340,15">
<area shape="point" href="page3.html" coords="230,340">

Some people put a space without a comma between the x and y pairs like "20,150 240,180" for a rectangle, "9,115 86,79 98,116 69,131 86,175 48,206" for a polygon and "230,340 15" for a circle.


For further information ablout forming rectangles, polygons or circles as image map shapes, see the following links:-
elated.com
Kasparius
HTML Goodies

See w3.org for detailed coding of images and image maps.


The following three examples do not use the image map code, but I have shown them on this page because they have a similar effect. They use a completely different coding method based on position: absolute elements to layer the links over a position: relative div with the image of swans. One method uses a background image and a transparent overlay and another uses a gold button.

For items 2b and 2c I found that I needed to create transparent images (as well as the images to show on hover in item 2c), otherwise the main image of swans had a blank space in it when not hovering over a swan.

2a green icon The following example shows a div with a background image of two swans and position: relative and p tags inside with position: absolute and background: transparent.

The code in the head style tag is:-

The html markup is:-


2b green icon The following example shows a white border to the transparent hover link. It is based on code for Map #1at CSSplay which uses a completely different coding method based on a background image and a transparent overlay. It validates with Doctype XHTML 1.1.
There have been comments that the usemap method in item 1 is out of date; it has difficulty validating and also working on IE and Firefox.

Male swan
Female swan

The code in the head style is:-
#imap {display:block; width:200px; height:50px; background:url(images/swans200x50.jpg); position:relative; }
a#maleswan {display:block; width:60px; height:0; padding-top:29px; overflow:hidden; position:absolute;}
a#femaleswan {display:block; width:75px; height:0; padding-top:30px; overflow:hidden; position:absolute;}
a#maleswan {left:10px; top:0px; background:transparent url(images/transparent65x29.gif) }
a#femaleswan {left:95px; top:18px; background:transparent url(images/transparent75x30.gif) }
a#maleswan:hover, a#femaleswan:hover {background-position: 0 0; border: 1px solid #fff;}

The html code is:-
<dl id="imap">
<dd><a id="maleswan" title="Male swan link to Introduction" href="introduction.php">Male swan</a></dd>
<dd><a id="femaleswan" title="Female swan link to General Advice" href="generaladvice.php">Female swan</a></dd>
</dl>

The addition of title="..." to the html dd tag creates the browser standard popup on a yellow background for a link in Firefox and IE.


2c green icon The example below shows how a button can be layered over an a part of an image which will only show on hover. A small gold button will appear over the body of the swans.

The code in the head style tag is:-
#imap2 {display:block; width:200px; height:50px; background:url(images/swans200x50.jpg); position:relative; }
a#maleswan2 {display:block; width:16px; height:0; padding-top:29px; overflow:hidden; position:absolute;}
a#femaleswan2 {display:block; width:16px; height:0; padding-top:30px; overflow:hidden; position:absolute;}
a#maleswan2 {left:32px; top:7px; background:transparent url(images/transparent65x29.gif) }
a#femaleswan2 {left:123px; top:30px; background:transparent url(images/transparent75x30.gif) }
a#maleswan2:hover, a#femaleswan2:hover { background: url(images/gold16x16.jpg) 0 0 no-repeat; width: 16px; height: 16px; }

The html code is:-
<dl id="imap2">
<dd><a id="maleswan2" title="Male swan link to Introduction" href="introduction.html"></a></dd>
<dd><a id="femaleswan2" title="Female swan link to General Advice" href="generaladvice.html"></a></dd>
</dl>


3 green icon This example shows a dropdown menu where hovering over a dropdown link highlights an area on an image or map. It needs ActiveX or javascript enabled.

Note that although this example works well in IE6, IE7, Firefox, Opera and Safari, in IE8 the mouse tends to lose its connection when moving from the top level to the dropdown level. Even if you use a meta tag to emulate IE7, the problem still persists and so I'm waiting to see whether Microsoft will cure this problem.

It has a 16 x 16 px transparent gif image for the normal state (it could be any size as it never shows) and transparent gif images 65 x 29 px and 75 x 30 px with white borders for the hover state which is controlled by javascript to show over the background image of the swans.

Nearly all the code you need is in the source file of this page; the drop down menu styles and the javascript are in the head section and the body html markup shows the divs.


Notes

View/Source or View/Page Source in browser menu to see all html code.

The body of this page has margin: 20px. The examples above are in a containing div with width: 730px; and margin: auto; so that the page centralises at large screen resolutions.

A lot of codes have been put in html tags in my examples rather than in a stylesheet or in a style in the head. I have done this for the convenience of the viewer so that most (but not all) codes are in one place and the stylesheet does not always have to be viewed in addition. When coding your own page you should try to put as much as possible in a stylesheet and link with id or class to the html tag.

Remember that when a Doctype is included above the head before the html tag (as it should be) then the overall width of a div is its defined width plus borders, margins and padding widths.

If there are differences between Firefox and IE6 that cannot be overcome with one code, code first to get a satisfactory solution in Firefox then create an IF style which will only apply to IE6:-
for instance, if margin-top: 20px; in Firefox needs to be margin-top: 30px; in IE6 then put the following in the head of the html/xhtml page:-
<!--[if ie 6]> <style type="text/css"> div { margin-top: 30px; } </style> <![endif]-->
or if there are many different styles, create a separate stylesheet:-
<!--[if ie 6]> <link rel="stylesheet" href="ie6.css" type="text/css"> <![endif]-->
IE6 will contain just the amended styles such as div { margin-top: 30px; } and others (no head or body tags or Doctype).

When looking at a page source for this site you may see code like &lt;p>Little Egret&lt;/p> instead of <p>Little Egret</p>. The code &lt; is because in that instance the code is to be displayed on the screen as text. If the < symbol was placed in the code a browser would activate the code and it would not display as text. Such code is not normally required when writing html code tags which are to be activated.

© Wickham 2006 updated 2010


top | Sitemap | prev | next

 

Google
web www.wickham43.net/