區域藍色HTML標記大綱？

我在看HTML熱點，並有關於我對以前的堆棧溢出Q & A.區域藍色HTML標記大綱？

從「廢話」的第一個答案找到一個例子的問題，他已經提供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>

我瞭解大部分的答案作品除了，如果我點擊任何他們成爲一個藍色的輪廓突出了三個定義的多邊形區域的 - 但我不能看使這發生的代碼（例如點擊事件）。任何人都可以解釋如何/爲什麼他們顯示藍色沒有任何代碼（我可以看到）??顯示藍色點擊區域小提琴輸出

屏幕抓取：

來源

2017-03-08 Mikeyd

當您使用''標籤，它會自動讓你選擇它和它周圍增加了默認的藍色邊框它。 –

的地圖標籤被用來定義一個客戶端圖像映射。圖像地圖是可點擊區域的圖像。

的地圖元件的所需名稱屬性與IMG的 USEMAP屬性相關聯，並創建圖像和地圖之間的關係。

的地圖元件包含許多面積元件，其限定在所述圖像映射的可點擊區域。

要隱藏的輪廓，你可以做

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">

使用outine CSS屬性，你可以做很多東西的地圖區域。例如，你想從blue顏色更改爲red你可以做

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">

來源

2017-03-08 09:43:21

感謝大家在回答我的第一個問題時的反應 - 你們真棒..有沒有一種方法總是顯示一個熱點區域（例如，沒有點擊或不透明的顏色填充以突出顯示區域是可點擊的常量邊界）而不是它只在點擊時顯示？ – Mikeyd

@Mikeyd如果這個答案是有用的，那麼upvote並將其標記爲正確的答案。 –

這是瀏覽器處理如何點擊地圖區域，你會看到，如果你嘗試在Internet Explorer中您會得到一條虛線。在Chrome中，您將收到藍色輪廓，而在FireFox中，您將無法獲得一個！

它的處理類似於一個按鈕。

以下CSS將刪除輪廓：

map area{ 
    outline: none; 
}

來源

2017-03-08 09:18:55 DeclanPossnett

這可以解決由

outline:none;

來源

2017-03-08 09:22:06 Bhawna

區域藍色HTML標記大綱？

回答

相關問題