我正在尝试使用Jquery和Imagemapster js代码设置网页。 在页面中,我有一个带有iframe的adpetpet地图,每次点击一个字母时,相对页面(a.html,b.html等等)都会被加载到框架中。
所有这些在Firefox中运行良好,但在IE(8)中有两个问题:
第一次加载页面时,iframe本身不会加载,直到我按下其中一个字母
如果按F5或我使用浏览器选项重新加载页面,则会显示警告“Stack overflow at 686:686”,但代码中没有那么多行。
这是我的代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>My Comics - english</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="../css/style.css" type="text/css" media="all" />
<script type="text/javascript" src="../js/jquery-1.5.js"></script>
<script type="text/javascript" src="../js/jquery.imagemapster.js"></script>
</head>
<!-- to load pag a.html when F5 is pressed or the page is reload with browser option -->
<body onload = "window.frames['myframe'].src = 'a/a.html'" >
<div id="navigation">
<img id="menu-english" src="english.jpg"; USEMAP="#menu-english" BORDER=0 alt="" checked="true" />
</div>
<map name="menu-english">
<area letter="A" shape="poly" coords="226,18, 237,18, 240,21, 240,32, 237,36, 226,36, 223,32, 223,21" href="a/a.html" target="show" alt="" title="">
<area letter="B" shape="poly" coords="247,18, 258,18, 261,21, 261,32, 258,36, 247,36, 244,32, 244,21" href="b/b.html" target="show" alt="" title="">
......
......
</map>
<script type="text/javascript">
$(document).ready(function ()
{
$('#menu-english').mapster({
singleSelect : true,
clickNavigate : true,
render_highlight : { altImage : 'english2.jpg' },
mapKey: 'letter',
fill : true, altImage : 'english2.jpg',
fillOpacity : 1,
stroke : true,
strokeColor : 'ffffff',
strokeWidth : 3,
isDeselectable:false,
areas : [{key : 'A', selected : true, altImage : 'english2.jpg' }]
});
});
</script>
<iframe id="myframe" style="border:0px solid #2c9598; margin:0 auto;paddig:0; position: absolute; left: 40px; top:100px;" frameBorder="0"; src="a/a.html" name="show" width="944" height="480" scrolling="no" allowtransparency="true"> </iframe>
</body>
</html>