最新の押されたリンクに背景色を設定する次のJavaScriptコードがあります。
<script>
function changeClass(Index) {
var ids = new Array(
"null", "homenav", "coffeenav", "sidenav", "standnav",
"dinnernav", "stoolsnav", "pedestalsnav",
"galleriesnav", "pressnav", "factsnav", "contactnav"
);
var color = new Array(
"null", "#c9a900", "#f32837", "#0085cf",
"#00aa86", "#c99900", "c42695", "#617f90",
"#4814a9","#71a28a","#ac27a9","#998f86"
);
var i = 1;
var length = ids.length;
while (i < length) {
document.getElementById(ids[i]).style.backgroundColor = '#FFF';
document.getElementById(ids[i]).setAttribute("class","blacklink");
document.getElementById(ids[Index]).style.backgroundColor =color[Index];
document.getElementById(ids[Index]).setAttribute("class","whitelink");
i++;
}
}
</script>
また、次のようなテーブルもあります。
<table width="100%" border="0" align="left" cellpadding="3" cellspacing="3" class="menyrad">
<tr valign="middle" align="center">
<td width="10%" id="homenav">
<a href="framsida_test.html" onClick="changeClass(1)">Furniture home</a>
</td>
<td width="10%" id="coffeenav">
<a href="coffee.html" onClick="changeClass(2)">Coffee tables</a>
</td>
<td width="9%" id="sidenav">
<a href="side.html" onClick="changeClass(3)">Side tables</a>
</td>
<td width="9%" id="standnav">
<a href="stand.html" onClick="changeClass(4)">Stand tables</a>
</td>
<td width="8%" id="dinnernav">
<a href="dinner.html" onClick="changeClass(5)">Dinner tables</a>
</td>
<td width="6%" id="stoolsnav">
<a href="stools.html" onClick="changeClass(6)">Stools</a>
</td>
<td width="8%" id="pedestalsnav">
<a href="pedestals.html" onClick="changeClass(7)">Pedestals</a>
</td>
<td width="8%" id="galleriesnav">
<a href="galleries.html" onClick="changeClass(8)">Galleries</a>
</td>
<td width="6%" id="pressnav">
<a href="press.html" onClick="changeClass(9)">Press</a>
</td>
<td width="6%" id="factsnav">
<a href="facts.html" onClick="changeClass(10)">Facts</a>
</td>
<td width="8%" id="contactnav">
<a href="contact.php" onClick="changeClass(11)">Contact</a>
</td>
のCSSはclass="menyrad"
、次のようにclass="whitelink"
なりclass ="blacklink"
ます。
.menyrad td {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
.whitelink {
color:#fff;
outline:0;
font-weight:bold;
}
.blacklink a {
color:#000;
outline:0;
}
これはすべてのブラウザで正常に機能しますが、Internet Explorer(IE9で確認しましたが、どのバージョンでも機能しないようです)。リンクを押すと、リンクの周りに色のブロックが表示され、テキストが太字の白に変わり、押されたリンクの周りに点線の輪郭がなくなります。IEでは色付きのブロックが表示されますが、テキストは黒で太字ではなく、アウトラインがあります。
私に何ができる?