Forum Moderators: open
The html code (with javascript) shown below works in all browsers except IE.
I recently learned that IE don't want to handle the getElementById and id codes.
Is somebody so kind to advise me, is there another way to get it work or is there a workaround code?
Thanks in advance, Erik
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<title>test</title>
<script type="text/javascript">
<!--
var color = new Object();
color["100"] = new Array("300", "400");
color["200"] = new Array("100", "300", "400");
color["300"] = new Array("100", "200");
color["400"] = new Array("200");
var colors = new Array("related");
function on(id)
{
for (var i=0; i<color[id].length; i++)
{
var el = document.getElementById("index_"+color[id][i]);
if (el)
{
el.setAttribute("class", colors[i%1]);
}
}
}
function off(id)
{
for (var i=0; i<color[id].length; i++)
{
var el = document.getElementById("index_"+color[id][i]);
if (el)
{
el.removeAttribute("class");
}
}
}
//-->
</script>
<style type="text/css">
<!--
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
line-height: 18px;
color: #000000;
text-decoration: none;
}
a:link,
a:visited {
color: #000000;
text-decoration: none;
}
a:hover,
a:active {
color: #FF0000;
text-decoration: underline;
}
a.related {
color: #FF0000;
text-decoration: none;
}
-->
</style>
</head>
<body>
<a href="#" id="index_100" name="index_100" onMouseOver="on(100)" onMouseOut="off(100)">aaa</a><br />
<br />
<a href="#" id="index_200" name="index_200" onMouseOver="on(200)" onMouseOut="off(200)">bbb</a><br />
<br />
<a href="#" id="index_300" name="index_300" onMouseOver="on(300)" onMouseOut="off(300)">ccc</a><br />
<br />
<a href="#" id="index_400" name="index_400" onMouseOver="on(400)" onMouseOut="off(400)">ddd</a>
</body>
</html>
will not work in IE
replace with
el.className = colors[i%1];
and
el.className = "";
This works splendid.
