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

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

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

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

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

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

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

Ответы

Ответ 1

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

Ответ 2

У меня была аналогичная проблема с IE9, и это сработало:

#MyImageMap, #MyImage {
    outline: none;
}

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

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

Ответ 3

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

hidefocus="true"

Ответ 4

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

a{
   outline:none !important;
   border: none !important;
}

Ответ 5

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

img {
  outline:none;
}

Ответ 6

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

    $("area").focus(function(){
        $(this).blur();
    })

Ответ 7

Вы пытались добавить атрибут "border: none! important"?

Ответ 8

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

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

если вы не получите конкретную информацию о div или элементе, в котором он находится, это может привести к хаосу с вашей страницей и привести к тому, что все нажатие исчезнет, ​​когда мышь удерживается. Используйте в сочетании с .blur() для исправления для firefox и chrome.

Ответ 9

  • Перейдите в конструктор sharePoint и найдите свою страницу/изображение
  • Выделите изображение с рандомизированной границей

  • Найдите в коде следующие теги:

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

  • Между ними Добавить:

    style="border:none"

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

Ответ 10

Я испытываю то же самое с Chrome на OS X (v 8.0.552.224). Я только что перезапустил Chrome и получил автоматическое обновление на моем Mac, чтобы это начало появляться, поэтому должно быть что-то в новой версии.

Я заметил, что цвет контура можно изменить, изменив атрибут "контурный цвет" изображения, но не смог полностью скрыть его, даже если "контур" установлен в "none".

Ответ 11

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

Ответ 12

В css пишите

area {
    outline: none;
}

работал у меня