区域蓝色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标记大纲？

回答

相关问题