Bereich Blau Gliederung in HTML Markup?

Question

Ich bin auf der Suche HTML-Hot-Spots und habe eine Frage in Bezug auf ein Beispiel, das ich auf einem frühen Stack-Überlauf Q & A.

Previous Stack OverFlow Area Example

In der ersten Antwort von ‚Kauderwelsch‘ hat er gefunden habe, zur Verfügung gestellt ein funktionierendes Beispiel für JSFiddle. JSFiddle Example from Gibberish

function hovIn() { 
 
    var areaID = $(this).attr('id'); 
 
    //alert('['+areaID+']'); 
 
    if (areaID == 'CUST_1') { 
 
    $('#myDiv').show(); 
 
    } 
 
} 
 

 
function hovOut() { 
 
    $('#myDiv').hide(); 
 
} 
 

 
$('map area').hover(hovIn, hovOut);

#num_cust1 { 
 
    padding: 10px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 180px; 
 
} 
 

 
#num_cust2 { 
 
    padding: 10px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 60px; 
 
    left: 40px; 
 
} 
 

 
#num_cust3 { 
 
    padding: 10px; 
 
    background-color: yellow; 
 
    position: absolute; 
 
    top: 160px; 
 
    left: 180px; 
 
} 
 

 
#myDiv { 
 
    display: none; 
 
    width: 50%; 
 
    height: 50px; 
 
    padding: 10px; 
 
    background-color: skyblue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Instructions: Mouse over computer's monitor to see hidden DIV 
 
<!--<img src="http://www.proprofs.com/quiz-school/upload/yuiupload/2014513384.jpg" width="400" height="400" />--> 
 
<div id="imagemap"> 
 
    <img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#Map" border="0" /> 
 
    <map name="Map"> 
 
     <area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="CUST_1" name="CUST:1" /> 
 
     <area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="CUST_2" name="CUST:2" /> 
 
     <area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="CUST_3" name="CUST:3" /> 
 
    </map> 
 
    <p> 
 
    <div id="myDiv">This DIV hidden unless hover over the computer's monitor</div> 
 
    </p> 
 
</div> 
 
<!-- Yellow DIV ID numbers overlaid on top of computer components --> 
 
<div id="num_cust1">1</div> 
 
<div id="num_cust2">2</div> 
 
<div id="num_cust3">3</div>

Ich verstehe, wie die meisten der Antwort funktioniert außer, wenn ich auf einem der definierten drei Klicken Polygon Bereiche, die sie durch einen blauen Umriss hervorgehoben geworden - aber ich kann nicht sehen der Code, der dies ermöglicht (zB ein Klick-Event). Kann jemand erklären, wie/warum sie blau ohne Code auftauchen (das kann ich sehen)?

Screen grab von Fiddle Ausgabe mit blauem klickten gezeigt:

Answer 1

Die Karte Tag eine clientseitige Bild-Karte zu definieren, verwendet gelöst werden. Eine Image-Map ist ein Bild mit anklickbaren Bereichen.

Der gesuchte Name Attribut des Karte Element wird mit dem img des usemap Attribut zugeordnet ist, und schafft eine Beziehung zwischen dem Bild und der Karte.

Das Karte Element enthält eine Anzahl von Bereich Elementen, welche die anklickbare Bereiche in dem Image-Map definiert.

den Umriss verbergen Sie

map area { 
 
    outline: none; 
 
}

<map name="primary"> 
 
    <area shape="circle" coords="75,75,75" href="#"> 
 
    <area shape="circle" coords="275,75,75" href="#"> 
 
</map> 
 
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

Mit der outine CSS-Eigenschaft tun können Sie eine Menge Zeug auf die Karte Gebiet zu tun.Zum Beispiel können Sie die Farbe blue-red ändern möchten, können Sie

map area{ 
 
outline-color: red; 
 
}

<map name="primary"> 
 
    <area shape="circle" coords="75,75,75" href="#"> 
 
    <area shape="circle" coords="275,75,75" href="#"> 
 
</map> 
 
<img usemap="#primary" src="http://placehold.it/350x150" alt="350 x 150 pic">

Answer 2

Dies ist, wie der Browser auf Kartengriffe klicken und Sie werden sehen, dass, wenn Sie versuchen, es in Internet Explorer Sie werde eine gepunktete Linie bekommen. In Chrome erhalten Sie einen blauen Umriss und in FireFox erhalten Sie keinen!

Es ist ähnlich wie eine Schaltfläche behandelt.

die folgende CSS wird die Kontur entfernen:

map area{ 
    outline: none; 
} 

Answer 3

Dies kann durch

outline:none;