3

我正在使用图像映射(带有 ImageMapster 插件)让用户将鼠标悬停在图像的某些部分上,然后显示带有额外信息的更大版本。

然后我希望能够显示需要不同视角的图像的其他部分。我通过让用户转到下一张图像来做到这一点,该图像是人轻微旋转的图像,以创建一种“3D 效果”。我通过让用户单击箭头或使用键盘上的箭头键(没有图像映射)来做到这一点。我通过更改图像的 src 属性并添加时间戳来做到这一点,以便浏览器重新加载图像。

但是问题出现了:如果我更改具有图像映射的图像的 src,浏览器不会重新加载图像,也不会重新加载时间戳。我检查了页面的来源,并且 src 属性正确更改。

的HTML:

<img id="test" src="image1.jpg" usemap="#map1" />
<map name="map1">
 <area shape="poly" coords="...." href="#" />
</map> 

JS:

function showPicture(){
  var newImg = "image"+newindex+".jpg";
  $("#test").removeAttr("usemap");
  $("#test").attr("usemap", "#imgmap"+newindex);
  $("#test").removeAttr("src");
  $("#test").attr("src", newImg+"?" + new Date().getTime());
}

如果我删除 usemap 属性,图像会重新加载,但如果我之后添加(不同的)图像映射则不会。我尝试在新图像加载完成后更改图像映射(因此在 load() 功能中),但这也不会使浏览器重新加载。

有人有什么想法吗?

提前致谢。

4

1 回答 1

1

发现了问题,我不得不解绑ImageMapster并重新绑定到图像

于 2013-10-03T08:05:41.270 回答