整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
例
带有可点击区域的图像映射：
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
<area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
<area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
浏览器支持
目前大多数浏览器支持 <map>标签。
标签定义及使用说明
<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。
HTML 4.01 与 HTML5之间的差异
注意: 在 HTML5 中, 如果 id 属性在<map> 标签中指定, 则你必须同样指定 name 属性。
HTML 与 XHTML 之间的差异
在 XHTML 中，name 属性已经废弃，使用 id 属性替换它。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| name | mapname | 必需。为 image-map 规定的名称。 |
全局属性
<map> 标签支持全局属性，查看完整属性表 HTML全局属性。
事件属性
<map> 标签支持所有 HTML事件属性。
如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！
们在后台编辑器添加内容的时候，需要上传多张图片，为了美化这些图片显示效果，想起了给图片增加阴影和圆角，由于图片是在后台编辑上传的，没办法直接定义样式，后面想到两种解决方案，分享一下。
一种解决方案就是通过写js或jquery代码，然后配合着正侧表达式，用正侧表达式查找你内容里的Img图片，再用jquery或js代码给img添加css代码即可，具体的代码如下：
<script type="text/javascript">
function imgTagAddStyle(htmlstr){
//正则匹配所有img标签
//var regex0 = new RegExp("(i?)(\<img)([^\>]+\>)","gmi");
//正则匹配不含style="" 或 style='' 的img标签
var regex1 = new RegExp("(i?)(\<img)(?!(.*?style=['\"](.*)['\"])[^\>]+\>)","gmi");
//给不含style="" 或 style='' 的img标签加上style=""
htmlstr = htmlstr.replace(regex1, "$2 style=\"\"$3");
//console.log("增加style=\"\"后的html字符串："+htmlstr);
//正则匹配含有style的img标签
var regex2 = new RegExp("(i?)(\<img.*?style=['\"])([^\>]+\>)","gmi");
//在img标签的style里面增加css样式(这里增加的样式：display:block;max-width:100%;
//height:auto;border:5px solid red;)
htmlstr = htmlstr.replace(regex2, "$2display:block;max-width:100%;
height:auto;border:5px solid red;$3");
//console.log("在img标签的style里面增加样式后的html字符串："+htmlstr);
return htmlstr;
}
var str0 = "<div style=\"background-color:green;width:500px;\">
<p>are you ok?</p><img style=\"border:1px solid #ff0000;\"
src=\"https://iph.href.lu/100x100\" alt=\"\" />hello<span>the
<IMG src='https://iph.href.lu/100x100'></span><span style=\"font-size:20pt;\">
我是大神</span></div>";
console.log("原始html字符串："+str0);
var s = imgTagAddStyle(str0);
document.getElementById("demo").innerHTML=s;另外一种解决方案是，直接使用CSS代码全局样式，具体方法是，先给外部一个class标签，再给这个标签下的img 全局定义一个样式，也能解决，这种方案更简单，更好用，具体的代码如下 ：
/*内容图片加阴影*/
.article_content img{ border-radius: 5px 5px 5px 5px;object-fit: contain;box-shadow:
#84A1A8 0px 10px 15px;}border-radius是给img图片加圆角，boject-fit:对图片进行剪切，保留原始比例,box-shadow对图片增加阴影。
具体的效果如下图：
欢迎关注云码素材，交流分享! 云码素材原创作品，更多精品资源下载，技术分享请关注，私信云码素材！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html><ul>
<li></li>
<li></li>
</ul>霍格沃兹的测试管理班是专门面向测试与质量管理人员的一门课程，通过提升从业人员的团队管理、项目管理、绩效管理、沟通管理等方面的能力，使测试管理人员可以更好的带领团队、项目以及公司获得更快的成长。提供 1v1 私教指导，BAT 级别的测试管理大咖量身打造职业规划。
*请认真填写需求信息，我们会在24小时内与您取得联系。
