IE, Client Side Image Map, and Default Shape

Discussion in 'HTML' started by Jaxtraw, Apr 29, 2006.

  1. Jaxtraw

    Jaxtraw Guest

    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,142,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,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,325,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,514,270,505,237,479,229,469,
    207,480,183,507,175,538,175,549,189,563,200,571,241,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

    --
     
    Jaxtraw, Apr 29, 2006
    #1
    1. Advertising

  2. Jaxtraw

    dorayme Guest

    In article <44539790$0$702$>,
    "Jaxtraw" <> 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
     
    dorayme, Apr 30, 2006
    #2
    1. Advertising

  3. Jaxtraw

    Steve Pugh Guest

    "Jaxtraw" <> 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,142,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,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,325,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,514,270,505,237,479,229,469,
    >207,480,183,507,175,538,175,549,189,563,200,571,241,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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 30, 2006
    #3
  4. Jaxtraw

    Jaxtraw Guest

    Steve Pugh wrote:
    > "Jaxtraw" <> 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,142,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,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,325,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,514,270,505,237,479,229,469,
    >>

    207,480,183,507,175,538,175,549,189,563,200,571,241,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
     
    Jaxtraw, Apr 30, 2006
    #4
  5. Jaxtraw

    Steve Pugh Guest

    "Jaxtraw" <> wrote:
    >Steve Pugh wrote:
    >> "Jaxtraw" <> 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 <> <http://steve.pugh.net/>
     
    Steve Pugh, Apr 30, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Luigi Donatello Asero

    Image map: client-side or server-side (cgi)?

    Luigi Donatello Asero, Dec 23, 2003, in forum: HTML
    Replies:
    12
    Views:
    805
    Luigi Donatello Asero
    Dec 24, 2003
  2. Luigi Donatello Asero

    Re: Image map: client-side or server-side (cgi)?

    Luigi Donatello Asero, Dec 23, 2003, in forum: HTML
    Replies:
    0
    Views:
    393
    Luigi Donatello Asero
    Dec 23, 2003
  3. Luigi Donatello Asero

    Re: Image map: client-side or server-side (cgi)?

    Luigi Donatello Asero, Dec 23, 2003, in forum: HTML
    Replies:
    25
    Views:
    1,102
    Luigi Donatello Asero
    Dec 25, 2003
  4. RF Rohrer
    Replies:
    1
    Views:
    537
    Csaba Gabor
    Apr 3, 2005
  5. Vikas Kumar
    Replies:
    2
    Views:
    1,254
    Steven Cheng[MSFT]
    Aug 25, 2006
Loading...

Share This Page