Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > IE, Client Side Image Map, and Default Shape

Reply
Thread Tools

IE, Client Side Image Map, and Default Shape

 
 
Jaxtraw
Guest
Posts: n/a
 
      04-29-2006
Hi, hope this is the right ng for this question...

I'm going barmy with an image map. I can't seem to get IE 6 (version
6.0.2800.1106) to recognise the default "shape". It just ignores it. Here's
my code-

<IMG id="groupShot" src="meetthecrew2.jpg" usemap="#meetthecrew2.jpg"
width="700" height="337" border="0" alt="Lucy And The Crew">
<map name="meetthecrew2.jpg">
<area shape=poly
coords="167,335,167,323,155,316,151,210,140,103,14 2,46,107,16,82,26,69,69,60
,100,45,122,21,176,6,216,10,233,49,259,64,276,53,3 01,49,336"
onclick="javascript:showPopDiv('pfuff')">
<area shape=poly
coords="300,336,296,246,289,128,269,117,285,98,295 ,67,279,33,249,26,222,56,2
19,81,207,111,191,115,181,141,172,164,168,171,167, 209,163,247,158,288,166,31
8,176,336" onclick="javascript:showPopDiv('lucy')">
<area shape=poly
coords="310,335,306,271,313,217,319,196,313,175,32 5,156,332,122,339,50,352,3
5,379,34,396,60,405,97,412,129,427,139,428,165,434 ,194,433,125,465,114,465,1
30,450,141,438,244,427,336" onclick="javascript:showPopDiv('sephone')">
<area shape=poly
coords="446,335,442,318,458,287,487,275,509,281,51 4,270,505,237,479,229,469,
207,480,183,507,175,538,175,549,189,563,200,571,24 1,581,275,614,290,623,323,
621,336" onclick="javascript:showPopDiv('todger')">
<area shape=poly coords="611,189,537,136,499,45,496,0,699,0,699,123 "
onclick="javascript:showPopDiv('alienne')">
<area shape=default onclick="javascript:showPopDiv('default')">
</map>

The reason I'm using onclick is that IE, and IE alone, insists on drawing
phenomenally ugly "borders" around the shapes when they're clicked and
onclick seems to avoid that... but I have the same problem if I use hrefs.

The javascript is there to make an invisble div visible- you click on the
pic and the div pops up with some info on what you've clicked.

Anyway, this works fine in Opera and Firefox, but nothing I've tried with
"default" works in IE. All the other shapes work fine in all the browsers,
including IE.

I thought IE5 had problems with "default" but that IE6 is okay with them. I
don't use image maps much and have never used "default" before- but I'd
really like this to work. If anybody has any suggestions they would be
gratefully appreciated!

Ian

--



 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      04-30-2006
In article <44539790$0$702$(E-Mail Removed)>,
"Jaxtraw" <(E-Mail Removed)> wrote:

> Hi, hope this is the right ng for this question...
>
> I'm going barmy with an image map. I can't seem to get IE 6 (version
> 6.0.2800.1106) to recognise the default "shape". It just ignores it. Here's
> my code-



Be nice to have a url to see what is what.... How about a url
without any javascript (unlike the code you give)?

Perhaps you might find my experience helpful: when I used to make
more image maps than I do now, I was surprised to find that it is
quite effective to just use rectangular shapes in spite of the
irregularity of the actual bits you want ideally to capture.
People with mice are quite active and soon find the intuituive
centres of the appropriate features (like humans in a group pic).
This way at the very least, if borders appear they won't look too
bad. nd another thing, the rect coordinates are easier to make
and less prone to error.

As for borders, you should be able to turn such off with
appropriate css. Make sure that the hover specs do not specify
any borders at all, or better, specify no border.

You should have a doc type, if you use a strict type of modern
vintage, take out the border="0" from the img tag and reference
it from some css, like a class.

--
dorayme
 
Reply With Quote
 
 
 
 
Steve Pugh
Guest
Posts: n/a
 
      04-30-2006
"Jaxtraw" <(E-Mail Removed)> wrote:

>I'm going barmy with an image map. I can't seem to get IE 6 (version
>6.0.2800.1106) to recognise the default "shape". It just ignores it. Here's
>my code-
>
> <IMG id="groupShot" src="meetthecrew2.jpg" usemap="#meetthecrew2.jpg"
>width="700" height="337" border="0" alt="Lucy And The Crew">
> <map name="meetthecrew2.jpg">
> <area shape=poly
>coords="167,335,167,323,155,316,151,210,140,103,1 42,46,107,16,82,26,69,69,60
>,100,45,122,21,176,6,216,10,233,49,259,64,276,53, 301,49,336"
>onclick="javascript:showPopDiv('pfuff')">
> <area shape=poly
>coords="300,336,296,246,289,128,269,117,285,98,29 5,67,279,33,249,26,222,56,2
>19,81,207,111,191,115,181,141,172,164,168,171,167 ,209,163,247,158,288,166,31
>8,176,336" onclick="javascript:showPopDiv('lucy')">
> <area shape=poly
>coords="310,335,306,271,313,217,319,196,313,175,3 25,156,332,122,339,50,352,3
>5,379,34,396,60,405,97,412,129,427,139,428,165,43 4,194,433,125,465,114,465,1
>30,450,141,438,244,427,336" onclick="javascript:showPopDiv('sephone')">
> <area shape=poly
>coords="446,335,442,318,458,287,487,275,509,281,5 14,270,505,237,479,229,469,
>207,480,183,507,175,538,175,549,189,563,200,571,2 41,581,275,614,290,623,323,
>621,336" onclick="javascript:showPopDiv('todger')">
> <area shape=poly coords="611,189,537,136,499,45,496,0,699,0,699,123 "
>onclick="javascript:showPopDiv('alienne')">
> <area shape=default onclick="javascript:showPopDiv('default')">
></map>


All your area elements are missing the mandatory alt attribute.

>The reason I'm using onclick is that IE, and IE alone, insists on drawing
>phenomenally ugly "borders" around the shapes when they're clicked and


Those are used by users who use the keyboard rather than the mouse to
navigate the site. They are an important acessibility feature.

They can also be quite useful for all users, especially with complex
maps with small regions it's useul to have some indication that you've
clicked where you wanted to click.

>onclick seems to avoid that... but I have the same problem if I use hrefs.
>
>The javascript is there to make an invisble div visible- you click on the
>pic and the div pops up with some info on what you've clicked.


What happens for users who have JS disabled?

>Anyway, this works fine in Opera and Firefox, but nothing I've tried with
>"default" works in IE. All the other shapes work fine in all the browsers,
>including IE.


If no other solution presents itself, you can always replace
<area shape=default>
with (and this must go last in the list of areas)
<area shape="rect" coords="0,0,700,337">

The two are functionally identical. Browsers read down the list of
areas and apply the first one that matches a given click, so in the
case of overlaps one specified at the end of the list like this would
only be used if no previous region had been used.

Another suggestion would be to move your default onclick out of the
image map and onto the image itself. You may need to rework your
script to take event bubbling into account.

However, once you've worked out what's going to happen for users with
no JavaScript this whole problem may simply go away...

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
Jaxtraw
Guest
Posts: n/a
 
      04-30-2006
Steve Pugh wrote:
> "Jaxtraw" <(E-Mail Removed)> wrote:
>
>> I'm going barmy with an image map. I can't seem to get IE 6 (version
>> 6.0.2800.1106) to recognise the default "shape". It just ignores it.
>> Here's my code-
>>
>> <IMG id="groupShot" src="meetthecrew2.jpg" usemap="#meetthecrew2.jpg"
>> width="700" height="337" border="0" alt="Lucy And The Crew">
>> <map name="meetthecrew2.jpg">
>> <area shape=poly
>>

coords="167,335,167,323,155,316,151,210,140,103,14 2,46,107,16,82,26,69,69,60
>> ,100,45,122,21,176,6,216,10,233,49,259,64,276,53,3 01,49,336"
>> onclick="javascript:showPopDiv('pfuff')">
>> <area shape=poly
>>

coords="300,336,296,246,289,128,269,117,285,98,295 ,67,279,33,249,26,222,56,2
>>

19,81,207,111,191,115,181,141,172,164,168,171,167, 209,163,247,158,288,166,31
>> 8,176,336" onclick="javascript:showPopDiv('lucy')">
>> <area shape=poly
>>

coords="310,335,306,271,313,217,319,196,313,175,32 5,156,332,122,339,50,352,3
>>

5,379,34,396,60,405,97,412,129,427,139,428,165,434 ,194,433,125,465,114,465,1
>> 30,450,141,438,244,427,336"
>> onclick="javascript:showPopDiv('sephone')"> <area shape=poly
>>

coords="446,335,442,318,458,287,487,275,509,281,51 4,270,505,237,479,229,469,
>>

207,480,183,507,175,538,175,549,189,563,200,571,24 1,581,275,614,290,623,323,
>> 621,336" onclick="javascript:showPopDiv('todger')">
>> <area shape=poly coords="611,189,537,136,499,45,496,0,699,0,699,123 "
>> onclick="javascript:showPopDiv('alienne')">
>> <area shape=default onclick="javascript:showPopDiv('default')">
>> </map>

>
> All your area elements are missing the mandatory alt attribute.


I do housekeeping like that once the functional HTML is complete.

>> The reason I'm using onclick is that IE, and IE alone, insists on
>> drawing phenomenally ugly "borders" around the shapes when they're
>> clicked and

>
> Those are used by users who use the keyboard rather than the mouse to
> navigate the site. They are an important acessibility feature.


They only show in IE and they ruin the look of the thing. Image maps are an
eye candy feature, and like anybody sensible I'd never use one for important
navigational purposes. That's a job for text links.

> They can also be quite useful for all users, especially with complex
> maps with small regions it's useul to have some indication that you've
> clicked where you wanted to click.


Not applicable in this case. If you've clicked, the DIV pops up.

>> onclick seems to avoid that... but I have the same problem if I use
>> hrefs.
>>
>> The javascript is there to make an invisble div visible- you click
>> on the pic and the div pops up with some info on what you've clicked.

>
> What happens for users who have JS disabled?


It doesn't work. Like many many sites whose tricksy DHTML menus don't work
for non-scripting visitors. The difference here is that it's not an
essential navigational tool. Which, by the by, is why I never use plugins
like Flash since I guess many people, like me, keep the annoying things
switched off unless they specifically want them on for a particular site.

>> Anyway, this works fine in Opera and Firefox, but nothing I've tried
>> with "default" works in IE. All the other shapes work fine in all
>> the browsers, including IE.

>
> If no other solution presents itself, you can always replace
> <area shape=default>
> with (and this must go last in the list of areas)
> <area shape="rect" coords="0,0,700,337">
>
> The two are functionally identical. Browsers read down the list of
> areas and apply the first one that matches a given click, so in the
> case of overlaps one specified at the end of the list like this would
> only be used if no previous region had been used.


> Another suggestion would be to move your default onclick out of the
> image map and onto the image itself. You may need to rework your
> script to take event bubbling into account.


Thanks for the advice

> However, once you've worked out what's going to happen for users with
> no JavaScript this whole problem may simply go away...
>


To script or not to script is just one of those questions. Like I said, I
never use javascript for essential site navigation. This is an extra feature
that just makes things a bit more interesting for those who have it. If you
want things to be even slightly dynamic on a page, sadly it's unavoidable.

I don't like javascript. I'd prefer that browsers have something more
limited that all users can trust to leave working; an integral DHTML
manipulation markup/language rather than the rather too broadly specced
javascript. But we don't have that, so I'm making do with what there is.

Look on the bright side, at least I'm not the kind of buffoon who makes
their links out of java applets or puts essential navigation menus in
javascript that only works in IE and Netscape 4.

Ian


 
Reply With Quote
 
Steve Pugh
Guest
Posts: n/a
 
      04-30-2006
"Jaxtraw" <(E-Mail Removed)> wrote:
>Steve Pugh wrote:
>> "Jaxtraw" <(E-Mail Removed)> wrote:
>>
>>> The reason I'm using onclick is that IE, and IE alone, insists on
>>> drawing phenomenally ugly "borders" around the shapes when they're
>>> clicked and

>>
>> Those are used by users who use the keyboard rather than the mouse to
>> navigate the site. They are an important acessibility feature.

>
>They only show in IE and they ruin the look of the thing.


People do use IE without a mouse.

>>> The javascript is there to make an invisble div visible- you click
>>> on the pic and the div pops up with some info on what you've clicked.

>>
>> What happens for users who have JS disabled?

>
>It doesn't work. Like many many sites whose tricksy DHTML menus don't work
>for non-scripting visitors. The difference here is that it's not an
>essential navigational tool.


But is the content of the 'div popups' available in an other way?

I'd do something like this:

<area href="#foo" onclick="whatever(); return false;">

Then lower down the page:
<div id="foo">blah blah blah</div>
And only hide the div if the browser supports all the required JS for
the popups. Then the user without JS can still access the content
normally.

Steve
--
"My theories appal you, my heresies outrage you,
I never answer letters and you don't like my tie." - The Doctor

Steve Pugh <(E-Mail Removed)> <http://steve.pugh.net/>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
How to execute client-side code _after_ client-side validation? Bogdan ASP .Net 2 06-09-2008 01:31 PM
Client side script after client side validation with asp.net 2.0 Boss302 ASP .Net 0 11-21-2006 08:43 AM
get image side via client side script before file uplaod moondaddy ASP .Net 2 07-16-2004 04:50 AM
Adding custom client-side onClick handler with client-side validator controls Zoe Hart ASP .Net Web Controls 1 01-08-2004 10:45 PM
Image map: client-side or server-side (cgi)? Luigi Donatello Asero HTML 12 12-24-2003 12:03 PM



Advertisments