html中map是什么意思？具体有什么浸染？

html-css074

html中map是什么意思？具体有什么浸染？,第1张

map的作用是选择图片上的某个区域 比如我们 要一张图片的某一个位置加上超链接 area是选取的坐标位置<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" /><map name="planetmap" id="planetmap"><area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" /></map>

去掉html中点击map里area的边框与去掉点击链接时出现的虚线框类似，本文举例来说明去掉点击map里area的边框的两种方法，分享给大家，希望能给您带来帮助。

1.<html>

2.<body>

3.<img src="pic.jpg" width="134" height="115" border="0" usemap="#Map" hidefocus="true" />

4.<map name="Map" id="Map">

5.<area shape="poly" coords="44,44,61,40,77,45,95,55,105,66,57,76,16,62,32,58,27,55,40,50" href="link_to.html"  />

6.</map>

7.</body>

8.</html>

1、第一种方法是：在<img>标签中加入 hidefocus="true"

Html代码

<img src="pic.jpg" width="134" height="115" border="0" usemap="#Map" hidefocus="true" />

<img src="pic.jpg" width="134" height="115" border="0" usemap="#Map" hidefocus="true" />

2、第二种方法是：在需要去掉边框的<area>标签中加入 onfocus="blur(this)" （如果area区域较多，则每个都要加，那就显得有些麻烦了，可以用第一种方法）

Html代码

<area shape="poly" coords="44,44,61,40,77,45,95,55,105,66,57,76,16,62,32,58,27,55,40,50" href="link_to.html" onfocus="blur(this)" />

<area shape="poly" coords="44,44,61,40,77,45,95,55,105,66,57,76,16,62,32,58,27,55,40,50" href="link_to.html" onfocus="blur(this)" />

// 隐藏map或者拦截map的click事件都可以

window.addEventListener('load',function(){

        

        // 隐藏map

        //document.getElementById('a').style.display='none'

        // 拦截map的click事件

document.getElementById('a').addEventListener('click',function(e){

e.preventDefault()

})

})