I follow the example code of Javascript interface to make a list pano
there is five lists, click on each one ,the beneath div can show different pano, they all work well in firefox ,but in IE, they are all invalid, include the a:hover is not working, what's the problem, it confusses me much time!
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<script type="text/javascript">
function krpano()
{return document.getElementById("krpanoSWFObject")}
function loadpano1()
{
krpano().call("loadpano('%SWFPATH%/1.xml')")
}
function loadpano2()
{krpano().call("loadpano('%SWFPATH%/2.xml')")}
function loadpano3()
{krpano().call("loadpano('%SWFPATH%/3.xml')")}
function loadpano4()
{krpano().call("loadpano('%SWFPATH%/4.xml')")}
function loadpano5()
{krpano().call("loadpano('%SWFPATH%/5.xml')")}
</script>
<style type="text/css">
body {
text-align: center;
text-align: -moz-center;}
.mainbox {
background-color: #F0F0F0;
border: 2px solid #F00;
width: 1200px;
margin: 20px auto 0px;
}
ul {
list-style-type: none;
font-size: 24px;
font-weight: bolder;
color: #666;
padding:0px;
margin: 0px;}
ul li {
float: left;
margin-left: 30px;
background-color:#84E276;}
#krpanoSWFObject{
text-align:center;
margin-top:40px;
border:1px solid #00f;
padding:0px;}
li a{
cursor:pointer;}
li a:hover{
color:white;
background-color:#960;}
</style>
</head>
<body>
<div class="mainbox">
<div id="menu">
<ul style="margin-left:0px;">
<li style="margin-left:0px;"><a onclick="loadpano1()">pano1</a></li>
<li><a onclick="loadpano2()">pano2</a></li>
<li><a onclick="loadpano3()">pano3</a></li>
<li><a onclick="loadpano4()">pano4</a></li>
<li><a onclick="loadpano5()">pano5</a></li>
</ul></div>
<div id="krpano"><embed src="1.swf" width="1200" height="640" id="krpanoSWFObject" flashvars="pano=1.xml"></embed></div>
</div>
</body>
</html>
Display More