Jex 0

This only happens in some IE's. Here: http://animactions.ca/Animactions/volet_entreprise.php

You may notice that when you click and drag on one of the circles, you will get something similar to this:

http://img534.imageshack.us/img534/7578/errorra.png

I cannot figure it out. Here is my image map:

  <map id="FPMap0" name="FPMap0">
  <area coords="405, 8, 375, 10, 353, 13, 322, 30, 317, 48, 327, 69, 344, 75, 370, 84, 401, 86, 428, 81, 454, 69, 466, 56, 468, 37, 452, 19, 419, 9" href="le_developpement_des_equipes_de_travail.php" shape="poly" style="outline:0" target="_blank" />
  <area coords="95, 164, 65, 166, 43, 174, 21, 186, 16, 206, 27, 225, 48, 237, 76, 241, 99, 241, 129, 236, 151, 228, 165, 214, 167, 194, 154, 177, 130, 168, 105, 165" href="le_developpement_operationnel.php" shape="poly" style="outline:0" target="_blank" />
  <area coords="138, 17, 115, 7, 95, 8, 63, 8, 41, 20, 21, 35, 23, 60, 42, 74, 77, 83, 117, 86, 144, 76, 164, 62, 173, 40, 156, 21, 137, 12" href="coaching_strategique_de_cadre.php" shape="poly" style="border-width:0" target="_blank" />
  </map>
  <img alt="services entreprise" height="258" src="Images/service_ent.PNG" width="490" usemap="#FPMap0" />

I really hope someone can figure this out because I'v tried everything...

Thanks

  • Your link doesn't seem to be working, can you double-check that URL you posted? Gary Hepting about 9 years ago

2 answers

0
points
This was chosen as the best answer

UPDATED: THANK YOU FOR THE KICK IN THE PANTS :)

What you're experiencing is anchor/hyperlink "outlining" which is intentional for accessibility purposes, such as keyboard and other alternative navigation methods.

You can add a CSS rule to disable outlining on the moue hover effect (corrected sample code) but as I mistaking stated previously, removing the outline on :focus or :active is a big no-no. Users that are RELYING on the alternative navigation methods would be virtually blinded by that while they were tabbing through links, etc.

a:hover, area:hover, a:hover img, a img:hover {
outline:none;
border:none;
}

I've already began to correct my mistakes on websites I may have that flawed style setup on. Thanks again for the correction.

Answered about 9 years ago by Gary Hepting
  • when I'm lazy I just do a global selector like this when I don't want outlines anywhere: * { outline:none; } Gary Hepting about 9 years ago
  • NOTE: The comment above here is the worst possible thing you can do... lol... it completely goes against all accessibility guidelines and disables the ability to visually navigation with alternative methods, such as keyboard tabbing, etc. Gary Hepting about 9 years ago
  • NOTE: The comment above here is the worst possible thing you can do... lol... it completely goes against all accessibility guidelines and disables the ability to visually navigation with alternative methods, such as keyboard tabbing, etc. Gary Hepting about 9 years ago
1
point

The outline is the only means that people navigating by keyboard have of knowing where their link focus is. The rule given above (since changed by gary) would have violated all accessibility guidelines. If you want to suppress the outline for mouse users, use a :hover selector only.

Your polygon could be a bit tidier - note that the start and end coordinates are supposed to be the same. In this case I think it would be neater to use rectangle or circle shapes. (Why oh why wasn't circle implemented as an ellipse?)

Answered about 9 years ago by Richard Grevers
  • Oh, and keyboard navigation is not limited to people with visual and motor disabilities - I know a number of laptop/netbook users who prefer keyboard to fiddling with a trackpad or scrollball. Richard Grevers about 9 years ago
  • Doh! What was I thinking. That is a great point and accessibility is very important. I see a couple hours of cleanup work I need to make on a few websites now... :) Gary Hepting about 9 years ago
  • I have corrected my answer to include more accurate information and reasonable methods. Gary Hepting about 9 years ago