HTML代码:
<div id="img01" class="x-hide-display">
<map id="jfreechart-5656490627055919439.png" name="jfreechart-5656490627055919439.png">
<area shape="poly" coords="522,269,525,275,519,275,519,275" title="(xxx费用, xxxx年) = 44,368,022.12" alt="" nohref="nohref"/>
<area shape="poly" coords="525,542,525,544,522,545,520,544,519,542,520,540,522,539,525,540,525,542,525,542" title="(xxx总费用, xxxx年) = 677,419.99" alt="" nohref="nohref"/>
<area shape="poly" coords="519,265,525,265,525,271,519,271,519,265,519,265" title="(总费用, xxxx年) = 45,045,442.11" alt="" nohref="nohref"/>
<area shape="poly" coords="343,69,346,75,340,75,340,75" title="(xxxxx总费用, 2011年) = 76,801,537.89" alt="" nohref="nohref"/>
<area shape="poly" coords="346,535,345,537,343,538,341,537,340,535,341,533,343,532,345,533,346,535,346,535" title="(xxx总费用, xxxx年) = 1,849,360.877" alt="" nohref="nohref"/>
<area shape="poly" coords="340,58,346,58,346,64,340,64,340,58,340,58" title="(总费用, xxxx年) = 78,650,898.767" alt="" nohref="nohref"/>
<area shape="poly" coords="164,492,167,498,161,498,161,498" title="(xxx总费用, 2010年) = 8,237,826.64" alt="" nohref="nohref"/>
<area shape="poly" coords="167,544,166,546,164,547,162,546,161,544,162,542,164,541,166,542,167,544,167,544" title="(xx总费用, xxxx年) = 341,959.202" alt="" nohref="nohref"/>
<area shape="poly" coords="161,490,167,490,167,496,161,496,161,490,161,490" title="(总费用, xxxx年) = 8,579,785.842" alt="" nohref="nohref"/>
</map>
<img class="changeOutHTML" src="/servlet/DisplayChart?filename=jfreechart-5656490627055919439.png" width="600" height="600" border=0 usemap="#jfreechart-5656490627055919439.png">
</div>
问题:如何在<img>标签的前后加上<center></center>包裹
第一个想到的方法就是outHTML嘛,这个一定行,但是我在FF上尝试去得到,但返回的都是undefined,(IE上没有测试过),就算可以那也不兼容FF,所以没有测试
下面是如何解决这个问题的:
这个就是完成居中的代码:
var imgs=document.getElementsByTagName('div');
var imgsFilters=new Array();
for(var i=0;i<imgs.length;i++){
if(/^img/.test(imgs[i].id)){
imgsFilters.push(imgs[i]);
}
}
//循环替换
for(var i=0;i<imgsFilters.length;i++){
var tag=imgsFilters[i].innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g, "");
var patt = new RegExp("<img.*>","g");
var result=patt.exec(tag);
tag=tag.replace(result,"<center>"+result+"</center>");
imgsFilters[i].innerHTML=tag;
}
对代码的解释:
var imgs=document.getElementsByTagName('div'); //得到所有的div
var imgsFilters=new Array();//存储过滤后需要操作的div,所有需要操作的div的id前缀都是以img开头的
for(var i=0;i<imgs.length;i++){
if(/^img/.test(imgs[i].id)){//使用正则匹配开头符合过则的div,返回true则添加到需要操作的集合中,false不做任何操作
imgsFilters.push(imgs[i]);
}
}
下面这个循环很重要:
//循环替换标签内容
for(var i=0;i<imgsFilters.length;i++){//循环需要操作的div数组
//大家在想为什么需要这行,这行代码out.write("\t\t\tbackground:red !important;\r\n");我相信大家很熟悉,是JSP编译之后生成的Java文件,在一行的结尾会有\r\n,在正则匹配 的时候如果有换行,写这个则会比较麻烦,所以先将所有的换行全部替换
var tag=imgsFilters[i].innerHTML.replace(/(\n|\r|(\r\n)|(\u0085)|(\u2028)|(\u2029))/g, "");
//匹配以"<img" 开头一直到该img的反标签结束 ">" 的字符串返回
var patt = new RegExp("<img.*>","g");
var result=patt.exec(tag);//返回匹配到的"<img开头直到该img 的反标签">"的字符串
//对其进行替换,在这里一定会有人说声明什么变量啊,"patt.exec(tag);"直接写两次不就结了,这样写会出问题,因为patt.exec(tag);返回的对象还带有一个属result.lastIndex
,因为我上面写的是全局匹配,patt.exec(tag)会根据你调用的次数,而且存在多个可以匹配字符串,那么会依次返回,那么第一次匹配完后,下一次开始匹配的起始点就是上一次匹配lastIndex,如果调用两次,那么在我当前的这种情况下,会返回null,替换也会失败.
tag=tag.replace(result,"<center>"+result+"</center>");
//将替换后的字符串赋值给div
imgsFilters[i].innerHTML=tag;
}
不知道我的描述大家能否看懂,如有问题欢迎大家指出!
分享到:
相关推荐
<td width="530" height="175" valign="top"><img src="images/main.gif" width="530" height="175" border="0" usemap="#Map"></td> </tr> <tr> <td height="36" valign="top"><table width="530" border="0" ...
<img src="images/spacer.gif" alt="setalpm" width="120" height="120" border="0" usemap="#Map" class="rss" /> <map name="Map"> <area shape="circle" coords="60,60,63" href="sc.chinaz.com"> </map> </...
align=center><br> <tr> <br> <td align=center><a name=top></a><img src="/images/skin/1/other/keke.gif" width="740" height="222" border="0" <br> <br> usemap=&...
<img src="img/机器猫.png" usemap="map" width="%" height="%"> <map id="map" name="map"> <area shape="circle" coords="200,50,30" href="Introduce.html" title="这是机器猫的左眼睛" target="_blank"> ...
<p align="left"><img style="WIDTH: 714px; HEIGHT: 179px" height="179" alt="" width="713" usemap="#Map" border="0" src="/uploadfile/ewebeditor/11(5).jpg" /></p> </td> </tr> <tr>
<img >/images/dl.gif" width="81" height="22" border="0" usemap="#Map"> 上面的图片在<body>中 而下面这句放入<body>外 <map name="Map"> <area shape="rect" coords="3,3,36,19" href="#"> <area ...
<TD><IMG height=29 src="../houtaimoban/houtaimoban/images/i_bottom_left.gif" width=15></TD> <TD background=../houtaimoban/houtaimoban/images/i_bottom_bg.gif></TD> <TD width=16> <IMG height=29 ...
img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...
" ></iframe> <br> <br> <br> </div><br> <img name="map" src="/image/maptop.gif" width="950" height="976" border="0" id="map" usemap="#m_map" alt="" /><br> <map name="m_map" id="m_map"><br> <area ...
<img src="<%= graphURL %>" width="600" height="400" border="0" usemap="#<%= filename %>"> 记得在每次调用saveChartAsPNG 方法前都要 session.removeAttribute("JFreeChart_Deleter"); 用户退出系统也记得...
$ ( "img[usemap]" ) . mapify ( ) ; 约夏克布丁 $ ( "img[usemap]" ) . mapify ( { popOver : { content : function ( zone ) { return "<strong>" + zone . attr ( "data-title" ) + "</strong>" + ...
在HTML中还可以把图片划分成多个热点区域,每一个热点域链接到不同网页的资源。 这种效果的实质是把一幅图片划分为不同的热点区域,再让不同的区域进行超链接。这就是影像地图。
#资源达人分享计划#
Warcraft3_UseMap01:라이브러리작성중
<img src="http://img03.taobaocdn.com/imgextra/i3/136488456/T2bvodXi8aXXXXXXXX_!!136488456.jpg" width="750" height="104" border="0" usemap="#Map11"> <map name="Map11"> <area shape="rect" coords="14,35...
usemap是标签的一个属性,用作指明所使用的图像地图名,接下来为大家介绍下UserMap的使用方法,感兴趣的朋友可以参考下
翻转时区突出显示(感谢 )用法使用所有默认设置的基本通话: $ ( '#img-with-usemap-attr' ) . timezonePicker ( ) ; 一些简单的选择: $ ( '#img-with-usemap-attr' ) . timezonePicker ( { pin : '.timezone-pin...
我们不想基于传单选项,方法和事件引入任何副作用。 这样,可以更轻松地更新传单依赖关系。 以“React方式”构建组件,无需扩展js类。 几乎没有任何文档。 应该仅向用户介绍现有的传单文档。 可插拔:通过使用...
2.在图片上利用映射距离usemap来实现按钮跳转。——第8尾集 3.表单必须要有name和value,因为抓包的时候,可发现必须要提交它们 4.fieldset标签——>legend、lable 5.只能用margin-top、margin-left定位div距离页面...
代码如下: var props = { ’for’ : ‘htmlFor’, ’class’: ... ‘tabIndex’, usemap: ‘useMap’, frameborder: ‘frameBorder’ } 说点题外话,用json格式来创建对象的话,建议属性不需要单引号或者双引