Image map

bigairguy · Nov 25, 2005

If someone could help me, it would be wonderful, as I am rediculously stumped. I have a .bmp image that I created through good 'ol paint. What I am trying to do is create an image map using the image created from paint to allow a user to click on certain coordinates of the image. However, after accessing my page using the code below, the corresponding area that coincides with the coordinates is not clickable:

<img src="grid2.bmp" width="527" height="462" alt="Pixels" usemap=#pixelgrid" />

<map id ="pixelgrid" name="pixelgrid">
<area shape ="rect" coords ="0,0,10,10"
href ="myspace.com" target ="_blank"
alt="Add" />
<area shape ="circle" coords ="90,58,3"
href ="mercur.htm" target ="_blank"
alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
href ="venus.htm" target ="_blank"
alt="Venus" />
</map>

Any help as to why this doesn't work would be greatly appreciated. Also, when I access my page, my image has a blue border around it. Any ideas why or how to get rid of it?

Thanks in advance!
Patrick

vacunita · Nov 25, 2005

One, it is not recommended to use BMP in websitees as they tend to be very large, and some browsers dont even display them. It is recommended to use gif, or jpeg formats.

Two. The border is controlled by a property in the image called border. added the propery and set equal to zero like so:

Code:

<img src="grid2.jpg" [red]border="0"[/red]...>

Three The Image map, try making your areas bigger 0,0,10,10 is a 10 pixel square it is incredibly tiny.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

manarth · Nov 25, 2005

vacunita said:
Two. The border is controlled by a property in the image called border. added the propery and set equal to zero like so:

Code:

<img src="grid2.jpg" [COLOR=red]border="0"[/color]...>

border="0" is NOT standards-compliant HTML. The official way to do it is with a teensy bit of css:

Code:

<head>
  <title>foo</title>

[COLOR=red]
  <style type="text/css">
    img {
      border:0;
    }
  </style>[/color]
</head>

<marc>
New to Tek-Tips? Get better answers - faq581-3339

tsdragon · Nov 25, 2005

border="0" is NOT standards-compliant HTML

That depends on which version of (X)HTML you are trying to be compliant with.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

manarth · Nov 25, 2005

tsdragon said:
That depends on which version of (X)HTML you are trying to be compliant with.

In my mistaken belief that NO version of HTML ever included the 'border' attribute for img, I checked the DTDs

[ul]
[li]HTML 2.0[/li]
[li]HTML 3.2[/li]
[li]HTML 4.0 (Standard) | (Transitional)[/li]
[li]HTML 4.01 (Standard) | (Transitional)[/li]

[li]XHTML 1.0(Standard) | (Transitional)[/li]

[/ul]
And to my discovery! You're quite right, border is a valid img attribute for HTML 3.2 and the transitional DTDs for HTML 4.0, 4.01, and XHTML 1.0. But not in any of the Strict DTDs.

still, that's no excuse - the border attribute is baadddd...

<marc>
New to Tek-Tips? Get better answers - faq581-3339

vacunita · Nov 25, 2005

I know the border attribute is not a good choice, but it is the simplest method of removing the border from an image.

Having to go into CSS requires alot more and is ultimately less practical in cases like this, even if it isn't up to the strictest html standrds.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

bigairguy · Nov 25, 2005

Thanks for all the info on the border-I was able to make that work. However, I still can't get my map to work. I changed the file type to jpeg. The image consists of a grid that is divided into squares each 10 pixels by 10 pixels. Ideally I want to be able to put different images with links in each 10 x 10 square. Are map and area tags the best way to go about doing this? I still cannot get the image map to work. Any thoughts or ideas?

Thanks,
Patrick

tsdragon · Nov 25, 2005

In my mistaken belief that NO version of HTML ever included the 'border' attribute for img...

I've been doing HTML since version 2.0, and AFAIK the border attribute has always been there. How do you think people removed the border before CSS?

still, that's no excuse - the border attribute is baadddd

Why would you say that? It works, it's simple, and it requires no knowledge whatsoever of css to make it work, and it keeps the attribute right there with the element it affects. It may be "nonstandard" for XHTML, but that doesn't make it bad.

Tracy Dryden

Meddle not in the affairs of dragons,
For you are crunchy, and good with mustard. [dragon]

manarth · Nov 25, 2005

tsdragon said:
I've been doing HTML since version 2.0, and AFAIK the border attribute has always been there. How do you think people removed the border before CSS?

HTML 2.0 was developed by the IETF's HTML Working Group, and published as RFC1866 in November 1995.
The first draft of CSS was published in October 1994, and CSS level 1 emerged as a W3C Recommendation in December 1996.

HTML 3.2 - the W3C's first Recommendation for HTML - was released in 1996, and included documented support for linked stylesheets.

Whilst HTML 2.0 didn't include support for stylesheets, the W3C published Recommendations for HTML 3.2 and CSS only a year later.

tsdragon said:
manarth said:

still, that's no excuse - the border attribute is baadddd

Click to expand...

Why would you say that?

because ultimately, the border represents presentation. The separation of document structure from presentation had been a goal of HTML from its very inception. HTML 2.0 may not have supported it, but the intention was there from the beginning, and once the capability arrived, there's no reason not to take advantage of it.

<marc>
New to Tek-Tips? Get better answers - faq581-3339

ChrisHunt · Nov 27, 2005

bigairguy,

I think you have a # where you should have a ". Try

Code:

<img src="grid2.bmp" width="527" height="462" alt="Pixels" usemap=[red]"[/red]pixelgrid" />

<map id ="pixelgrid" name="pixelgrid">
... etc ...

vacunita/tsdragon,

If you use CSS at all on your sites, and you really should, it's not a good idea to use [tt]border=0[/tt]. The reason is that any borders defined for images in the stylesheet will override deprecated attributes like [tt]border[/tt]. If you're in a "want to stop borders on this image and can't be bothered to do it via the stylesheet", it's best to use inline CSS instead:

Code:

<img src="mypic.gif" alt="" style="border: 0">

However, if you see a seperate stylesheet as a vital component of your website, rather than an irksome extra that you graft onto your pages as an afterthought, you'll find life easier in the long run. Inline styles are OK if you make every design decision right first time, and you (or your customers) never want to change it. But if you decide you change the appearance of, say, all image borders in your site, it's easier to change one stylesheet than umpteen <img> tags.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

manarth · Nov 27, 2005

ChrisHunt said:
bigairguy,

I think you have a # where you should have a ". Try

Code:

<img src="grid2.bmp" width="527" height="462" alt="Pixels" usemap=[COLOR=red]"[/color]pixelgrid" /> <map id ="pixelgrid" name="pixelgrid"> ... etc ...

Acutally the usemap syntax does require the hash (because the usemap attribute is defined as a URI)

Code:

<img usemap="[COLOR=red]#[/color]mapname" />

Here's the MSDN reference to Usemap and the W3C's example. (Although the examples refer to HTML 4, it applies equally to XHTML.)

Whilst I can't see any issues with the code in the original post, it may be that there's a validation error which is having side effects. Check your page with the HTML Validator. Note that if you're using a STRICT doctype, you cannot use the target attribute.

An alternative to trying to click a particular place on the image, is using the tab key. Each area should be highlighted with a dotted border when it has the focus. (I use this as a good way to check my coordinates are correct).

<marc>
New to Tek-Tips? Get better answers - faq581-3339

vacunita · Nov 28, 2005

Instead of Using an Image map, I would cut the image into the sqares you want and then use tables(not recommended) or divs and css to align them however you want.

Still 10*10 pixels is awfully small. take this image for example this is a 10 by 10 blue square:

You might want to reconsider your sizes.

----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Image map

bigairguy

Programmer

vacunita

Programmer

manarth

Programmer

tsdragon

Programmer

manarth

Programmer

vacunita

Programmer

bigairguy

Programmer

tsdragon

Programmer

manarth

Programmer

ChrisHunt

Programmer

manarth

Programmer

vacunita

Programmer

Similar threads

Part and Inventory Search

Sponsor