`
tenderghost
  • 浏览: 24577 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

动态改变图片的useMap属性导致IE假死或崩溃!

阅读更多
    项目中需要动态生成一个统计图形,在统计图上用MAP标签生成图形的tooltip,由于图片是通过AJAX方式加载的,每次的图形都不同,则相应的MAP信息也就不同了,于是问题就出现了:

    每次更改图片的MAP时(img.useMap = "#mymap"),在我本机都是没问题的,很流畅,但别人的部分机器上就会出现IE假死的情况,甚至崩溃,很是郁闷,今天到Google了一下,发现确实有这个问题,而且仅限于IE7,摘抄如下:
引用

UseMaps Crash IE When Changed
By Shawn Olson

Posted on 03.31.08

Dynamically changing an image's usemap property can cause Internet Explorer to crash completely. You can encounter this problem if you have an image that is using an image map and then switch the image's usemap (and/or useMap) property to use an alternative image map. The crash happens when the image map you are changing to does not have as many area nodes as the current image map.

The solution to this problem is to add area nodes into the image map you are changing to before you change the image's usemap property. You can do this by running equalizeUseMaps() which is a function included in the JavaScript referenced below.

function equalizeUseMaps(currentUseMap,nextUseMap)

This function will add blank AREA nodes to nextUseMap if currentUseMap has more area nodes than nextUseMap has.

To use this function, add the following line of code to your HTML head:
<script type="text/javascript" src="http://www.shawnolson.net/scripts/areamap.js"></script>

Please include credit when using this script and read this site's Terms & Conditions before using.

原文地址为:http://www.shawnolson.net/a/1395/usemaps-crash-ie-when-changed.html

    当图片将要使用的MAP标签中的AREA节点数量小于当前所用MAP的AREA节点数量时,IE就完蛋了。
    解决办法就是在改变useMap属性之前,判断两个MAP中的AREA节点数量是否相等,如果不相等,则动态创建AREA节点,使他们相等。
分享到:
评论

相关推荐

    js 动态设置图片的热区并获取图片坐标

    在JavaScript中,动态设置图片的热区(hotspots)并获取图片坐标是一项常见的需求,尤其在交互式网页设计中。热区技术允许我们为图片指定特定的交互区域,用户点击或悬停在这些区域上时可以触发特定的事件。本文将...

    图像的影像地图超链接(热点区域),map标签浅谈

    这里,`src`属性指定了图像的路径,而`usemap`属性则指定了与该图像关联的`&lt;map&gt;`元素的名称。 ##### 2.2 `&lt;map&gt;`标签 `&lt;map&gt;`标签用于定义图像中的热点区域。它包含一系列`&lt;area&gt;`元素,每个`&lt;area&gt;`代表图像中的...

    js 动态获取图片矩形热区,并在热区上添加蒙版,鼠标经过,以半透明形式显示该区域

    - `&lt;img&gt;` 元素用于在网页上插入图像,`usemap` 属性用于关联图像与图像映射。 - `&lt;map&gt;` 元素定义图像映射,内部包含若干个`&lt;area&gt;`元素,每个`&lt;area&gt;`代表一个热区。 2. **JavaScript 动态创建热区**: - 可以...

    IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性

    还有一些其他属性,如`tabindex`、`readonly`、`maxlength`、`rowspan`、`colspan`、`usemap`、`frameborder`和`contenteditable`,在IE6/7中也存在类似的问题。为了解决这些问题,可以创建一个函数,像示例代码那样...

    用基于栅格数据结构的USEMAP软件包制作多因素叠加专题图.pdf

    在这篇文章中,作者徐肇忠以茶叶种植适应性分布图为例,介绍了如何使用基于栅格数据结构的USEMAP软件包来制作多因素叠加专题图。文章中提到的关键知识点包括以下几点: 1. 多因素叠加专题图的定义与重要性 专题图是...

    html基础属性代码

    `&lt;img&gt;`标签加载图像,`src`, `width`, `height`, `alt`, `title`, `dynsrc`和`usemap`属性分别定义图像源、尺寸、提示文本、动态源和映射。 12. **多媒体播放**:`&lt;embed&gt;`标签用于插入媒体文件,如音频或视频,`...

    HTML给位图片上的指定区域(热点)添加超链接.zip

    `usemap`属性允许我们将图像与一个图像映射关联起来,这个映射定义了图像上哪些区域可以被点击并触发不同的链接或动作。`usemap`的值通常是一个#符号后跟映射的名称,比如`#imageMap`。 接下来,我们来看`&lt;map&gt;`...

    html中map热点area的使用全部代码和效果,兼容所有浏览器

    4. 图像尺寸:确保`&lt;img&gt;`标签的`width`和`height`属性已设定,这样即使图片尚未加载,也能正确计算`coords`的坐标。 5. 错误处理:添加适当的错误处理机制,如备用文本或提示,以防图像无法加载或映射无效。 6. ...

    为图片根据坐标自动创建热区并点击变颜色

    通过监听`click`事件,可以获取点击的区域,并修改其样式,如改变`fill`(填充颜色)或`opacity`(透明度)属性。 - 使用CSS3,可以实现平滑过渡效果,比如点击后颜色渐变或透明度变化。 5. **示例代码**: ```...

    用CSS中的map标签制作单图多区域点击的示例

     img标签中的usemap属性可引用的map标签中的id或name属性(取决于浏览器),所以我们应同时向map标签添加id和name属性。 示例 例如我们想在下面一张图实现九个热点区域,不切图,就使用map标签。 首先用 ps 得到几...

    html中的map属性--地图例子

    在上述代码中,`&lt;img&gt;`标签中的`usemap`属性引用了`&lt;map&gt;`的`name`属性,即"#fijiMap"。接着,我们定义了三个`&lt;area&gt;`元素,每个都有不同的`shape`、`coords`和`href`属性。 1. `shape`属性定义了区域的形状,可以...

    鼠标放在图片就放大,不用JS和CSS

    这里的`src`属性指定图片的URL,`alt`属性提供了一个替代文本,当图片无法显示时,或者对于屏幕阅读器的用户,这个属性很有用。 要实现鼠标悬停放大图片的效果,可以使用HTML的`&lt;map&gt;`和`&lt;area&gt;`标签来创建一个图像...

    如何使用DW工具给图片添加热点

    选中图片后,在Dreamweaver的下方属性面板中会显示出与图片相关的属性。注意查看左下角的部分,那里通常会有一个“地图”工具的图标。如果没有看到这个图标,可以尝试点击属性面板右下角的小三角形按钮展开更多的...

    HTML、CSS里面关于 id、class、name 属性的区别和用法.docx

    5. 在`&lt;img&gt;`和`&lt;map&gt;`元素关联时,`usemap`属性引用`&lt;map&gt;`的name属性,定义图像的热点区域。 6. 在`&lt;param&gt;`元素中定义对象参数,或者在`&lt;meta&gt;`元素中设置元信息。 **class**属性,另一方面,用于定义样式类...

    html标签属性大全.pdf

    3. **影像地图 `&lt;map&gt;` 和 `&lt;area&gt;`**:允许创建交互式的图像,通过`usemap`属性将图像与`&lt;map&gt;`关联,然后使用`&lt;area&gt;`定义可点击的区域。 在准备考试或学习HTML时,了解这些基本标签及其属性是至关重要的。它们...

    javascript中setAttribute()函数使用方法及兼容性

    这个函数对于动态地改变页面上的元素特性来说是非常有用的。在使用这个函数时,需要特别注意的是它的兼容性问题,尤其是对于一些早期的浏览器如IE6和IE7等。 ### setAttribute()函数的基本使用方法 1. **函数定义*...

    ImageMap(2.0)

    4. **UseMap属性**: 图像映射使用`&lt;img&gt;`标签的`usemap`属性与`&lt;map&gt;`标签关联,定义哪个映射应用于哪张图片。 5. **Map标签**: `&lt;map&gt;`标签定义图像映射,`name`属性是映射的唯一标识符。 6. **Area标签**: `...

    HTML超链接图片热点区域.zip

    前端开发中,图片热点区域常用于创建交互式地图、产品目录或任何需要在单一图片上提供多个链接的场景。熟练掌握HTML的超链接和图像映射技术能提升用户体验,让网站更具互动性和吸引力。 总结来说,HTML的超链接图片...

Global site tag (gtag.js) - Google Analytics