クリックしたリンクの色を保持して、<object>にそのリンクを表示させる
下記のプログラムは、クリックしたリンクの色を保持して、<object>にそのリンクを表示させるようになっています。
プログラムの流れは、
（１）test1のリンクをクリックする
（２）test1の背景を黄色/文字を太文字に変更
（３）<div id="objarea">にtest1のリンクを表示
（４）次のリンク（test2）がクリックされるまで（２）を保持。クリックされたらtest2のリンクの背景を黄色/文字を太文字に変更。
（５）（１）～（４）の繰り返し。
をすると言う、感じです。ですが、「（３）の<div id="objarea">にtest1のリンクを表示」と言う動作ができなく、リンクの色の保持しか動作しません。
どこがいけないのか分からなくて困っています。どうぞよろしくお願いします。
[サンプルプログラム]
<style type="text/css">
<!--
.object
{
width: 400px; height: 400px; border: 1px solid #000000;
}
#menu a{
color:#0000ff;
text-decoration:none;
}
#menu .hoge{
color:#ff0000;
background-Color:#ffff00;
font-weight:bold;
}
-->
</style>
<script type="text/javascript">
<!--
function changeObj(url){
document.getElementById('objarea').innerHTML = '<object data="' + url + '" type="text/html"><\/object>';
}
//-->
</script>
<script type="text/javascript">
<!--
window.onload=function(){
setColor();
}
function setColor(){
var menu=document.getElementById("menu");
var tags=menu.getElementsByTagName("a");
for (var i=0;i<tags.length;i++){
tags[i].onclick=function(){
var pp=this.parentNode.parentNode;
var tags=pp.getElementsByTagName("a");
for (var i=0;i<tags.length;i++){
tags[i].className="";
}
this.className="hoge";
}
}
}
if (window.attachEvent){
window.attachEvent('onclick', setColor);
window.attachEvent('onclick', changeObj);
}
else {
window.addEventListener('onclick', setColor, false);
window.addEventListener('onclick', changeObj, false);
}
//-->
</script>
</head>
<body>
<div id="objarea">
<object data="http://yahoo.co.jp" type="text/html"></object>
</div>
<ul id="menu">
<li><a href="#" onclick="changeObj('http://yahoo.co.jp'); return false;">test1</a></li>
<li><a href="#" onclick="changeObj('http://www.google.co.jp/'); return false;">test2</a></li>
</ul>
</body>
</html>
お礼
ありがとうございます。 延長だけなのは残念ですが、助かります。