Как избавиться от этого контура границы для областей карты изображений при нажатии (только для OS X Chrome) - PullRequest
15 голосов
/ 04 декабря 2010

У меня есть это изображение карты

http://corfro.com/projects/charlie-faye-tour-map/

И когда вы нажимаете на разные города, в области появляется черная граница, но только в Chrome. (может потребоваться несколько раз щелкнуть по разным городам, но появится граница - как только автобус прибудет в город, границы начнут появляться)

Я пробовал следующее, но безрезультатно.

a{outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }

У вас, ребята, есть предложения? Любая помощь очень ценится, так как это сводит меня с ума!

Ответы [ 11 ]

28 голосов
/ 11 апреля 2011

Старый трюк <area onfocus="blur(); (...) />" Удачи;

9 голосов
/ 05 апреля 2012

У меня была похожая проблема в IE9, и это сработало:

#MyImageMap, #MyImage {
    outline: none;
}

Первоначальный источник идеи: «Одно замечание о картах изображений состоит в том, что вы хотите отключить границу для тегов img, map и area с помощью CSS» http://forums.macrumors.com/showthread.php?t=1342928

(область является дочерним элементом карты)

4 голосов
/ 21 марта 2012

В теге <IMG> добавьте

hidefocus="true"

2 голосов
/ 13 марта 2014

Использование jquery на основе решения @boru:

    $("area").focus(function(){
        $(this).blur();
    })
2 голосов
/ 14 мая 2012

Это исправляет это в IE

img {
  outline:none;
}
2 голосов
/ 23 января 2012

Попробуйте это, у меня это сработало;)

a{
   outline:none !important;
   border: none !important;
}
1 голос
/ 20 декабря 2011
  1. Зайдите в SharePoint Designer и найдите свою страницу / изображение
  2. Выделите изображение с рандомизированной рамкой
  3. Найдите следующие теги в коде:

    <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor"> </Content>

  4. Между ними добавить:

    style="border:none"

* может потребоваться добавить их после следующего: alt="" style="margin: 5px"

1 голос
/ 31 мая 2011

только что нашел исправление, чтобы избавиться от этой границы в Firefox 4, так как .blur, похоже, не исправляет его.

#someWrappingElement *:active { overflow-x:hidden }

, если вы не указали конкретный элемент div или элемент, в котором он находитсяон может нанести ущерб вашей странице и привести к тому, что вещи, на которые нажали, исчезнут, пока мышь удерживается нажатой.Используйте совместно с .blur () для исправления Firefox и Chrome.

1 голос
/ 10 декабря 2010

Вы пробовали добавить атрибут "рамка: нет! Важно"?

0 голосов
/ 29 декабря 2010

Я только что столкнулся с подобной проблемой.Я не смог избавиться от контура, но смог эффективно скрыть его, установив для свойства color элемента div цвет фона.Но у меня были участки плоского цвета.Если я установил прозрачный цвет, он получился черным.Это должно быть правильным путем, чтобы найти решение, хотя.Я использовал его на карте США, показанной здесь: карта

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...