Noktalı kenarlığı Firefox'taki <area> öğesinden nasıl silebilirim?

Question

Firefox'ta (şu anki sürüm 14.0.1) here (http://mediabrands.com.au/)'u oluşturduğum bazı <area> etiketlerinin etrafında noktalı bir anahat çiziyorum. Sadece noktalı bir çizgi görmemekle kalmadı, bir kere ortaya çıktığında, bundan kurtulamayacağım (örneğin başka bir bölgeye tıklayarak).

Ben bir zaman önemli miktarda buralarda ve Google aradık ve hala onlardan kurtulmak için yönetilen değil. Başka tarayıcılarda görünmezler.

şeyler denedim (ve aşağıda tüm kombinasyonları) başarılı olamadı:

• , img için outline: none ekle harita ve bölge etiketleri (ve onların :focus ve :active) muadilleri. Bunların her birine border: none eklenmiştir. Bunlardan her birine hidefocus="hidefocus" eklenmiştir.
• Bu öğelerin her birine ::-moz-focus-inner{ border: none; outline: none; } kullanarak çeşitli kombinasyonlar eklendi. Bunlara her biri için .focus(function(){ $(this).blur(); }) (jQuery) eklendi.

Karşılaştığım tüm bilgileri tükettiğime inanıyorum - bu satırlardan kurtulmanın başka bir yolu var mı? İşte

hızlı başvuru için HTML ve orada ben ondan kurtulmak olamaz nedeni olmaktan şey olasılığına:

<img src="anatomy/dial/components/foundation.png" id="dial-map" usemap="#dial" /> 
<map name="dial"> 
    <area title="Ansible" class="tab" id="click-ansible" shape="poly" coords="412,419,376,447,313,474,248,487,247,434,327,415,374,377" href="#"> 
    <area title="Cadreon" class="tab" id="click-cadreon" shape="poly" coords="487,245,478,313,455,366,416,417,378,380,429,299,434,246" href="#"> 
    <area title="Orion" class="tab" id="click-orion" shape="poly" coords="418,73,453,117,482,191,484,242,431,244,422,180,378,111" href="#"> 
    <area title="Ensemble" class="tab" id="click-ensemble" shape="poly" coords="247,1,311,10,368,35,415,70,378,108,312,66,244,53" href="#"> 
    <area title="Reprise" class="tab" id="click-reprise" shape="poly" coords="73,69,111,39,176,8,242,2,243,53,172,66,112,108" href="#"> 
    <area title="Magna Global" class="tab" id="click-magnaglobal" shape="poly" coords="245,487,186,481,114,450,71,417,110,377,175,423,246,432" href="#"> 
    <area title="Airborne" class="tab" id="click-airborne" shape="poly" coords="69,414,37,373,12,316,2,244,55,244,68,322,106,375" href="#"> 
    <area title="Marketing Sciences" class="tab" id="click-analytics" shape="poly" coords="2,242,11,171,33,120,71,74,109,109,70,168,54,241" href="#"> 
    <area title="MB3" class="tab" id="click-mb3" shape="poly" coords="257,430,178,422,120,384,82,340,140,305,163,337,206,360,262,364,317,342,348,305,404,340,384,367,324,413" href="#"> 
    <area title="UM" class="tab" id="click-um" shape="poly" coords="307,134,245,116,246,56,309,68,375,109,418,178,430,237,429,288,404,339,350,303,368,246,358,198,344,169" href="#"> 
    <area title="Initiative" class="tab" id="click-initiative" shape="poly" coords="80,339,63,289,58,235,72,171,109,112,176,67,243,56,242,119,192,128,152,159,126,206,122,261,137,306" href="#"> 
    <area title="View Website" id="website" shape="poly" coords="173,330,139,292,133,213,161,167,196,143,245,129,305,146,336,176,359,246,339,300,309,335,260,352,209,351" href="#"> 
</map> 

Answer 1

Sorun, dial.js.'nin 151 satırındaki bulanıklık odaklama işlevinizdir. Kaldırma sorunu giderir.Alan elemanları odaklanarak önlemek için

$("img, area, map").focus(function(event) { 
    $(this).blur(); 
}); 

, -1 bir tabindex, set yani

<area tabindex="-1" title="Ansible" class="tab" id="click-ansible" shape="poly" coords="... 

Demo: 0: http://jsfiddle.net/SO_AMK/K8Adx/

Answer 2

CSS kullanmayı deneyin: text-decoration:none;

Answer 3

deneyin Ayarı aşağıdaki soruya göre

: Blue border around image maps in Internet Explorer 9

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

01 aşağıdaki şekilde sınırında 0 alan Odak ve aktif devletler

Answer 4

odaklamak üzerinde bulanık soruna neden olduğunu görünüyor: dial.js kaldır

: http://jsfiddle.net/MadLittleMods/gDrAS/ Yorum ve görmek için javascript kaldırın: Burada

// Prevent focus of areas. 
$("img, area, map").focus(function() { 
    $(this).blur(); 
}); 

herşeyi basitleştirmek için yapılmış bir keman olduğunu farklı sonuçlar.

---

bulanıklık ve odak için bir çözüm event.preventDefault() kullanmaktır. Yani yukarıda kaldırılan öğelerin yerini alabilir: Ayrıca tabindex="-1" özelliğini kullanarak bir tabindex düzeltme yoktur

// Prevent focus of areas. 
$("img, area, map").focus(function(e) { 
    e.preventDefault(); 
}); 

.