<!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=gb2312" />
<title>Test</title>
<style type="text/css">
<!--
body {
margin-left: 0px;margin-top: 0px;}
div{
border:1px #CCCCCC solid; margin:100px; padding:5px; margin-top:100px}
#menu{
position:absolute; left:5px; height:400px; width:80px; font-family:"宋体"; font-size:12px; color:#2F3753;}
#menu dl dt{
list-style-type:none; text-align:center;}
.dt{
background:#999900;padding-top: 6px; padding-bottom: 5px; height:14px;}
#other{
position:absolute; left:180px; height:400px; width:600px;}
-->
</style>
<script language="javascript">
<!--
(function (bool) {
//兼容FF的一些方法
var srcElement;

if (bool) {

srcElement = new Function("return this.target");

window.MouseEvent.prototype.__defineGetter__("srcElement", srcElement);

window.KeyEvent.prototype.__defineGetter__("srcElement", srcElement);

Object.prototype.attachEvent = function (property, func, bool) {
this.addEventListener(property.replace(/^on/, ""), func, bool || false);
};

window.HTMLElement.prototype.__defineGetter__("className", function () {
return this.getAttribute("class");
});

window.HTMLElement.prototype.__defineSetter__("className", function (style) {
this.setAttribute("class", style);
});
}

})(window.Event);function __event(e) {
var node = (window.event || e).srcElement;
node.className = node.className ? "" : "dt";
}function init() {
var nodeList = document.getElementsByTagName("dt");
for (var i = 0 ; i < nodeList.length ; i ++) {
nodeList[i].attachEvent("onmouseover", __event);
nodeList[i].attachEvent("onmouseout", __event);
}   
}window.attachEvent("onload", init);
-->
</script>
</head>
<body>
<div id="menu">
<dl>
<dt>Title 1</dt>
<dt>Title 2</dt>
<dt>Title 3</dt>
</dl>
</div>
<div id="other"><img width="600px" height="400px" src="#" alt="other" /></div>
</body>
</html>

解决方案 »

  1.   


    忘记了attach还有返回值。。改变下。。Object的原形。。Object.prototype.attachEvent = function (property, func, bool) {
    return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
    };
      

  2.   

    ^o^
    让我在改下。。
    (function (bool) {
    //兼容FF的一些方法
    var srcElement;

    if (bool) {

    srcElement = new Function("return this.target");

    window.Event.prototype.__defineGetter__("srcElement", srcElement);

    Object.prototype.attachEvent = function (property, func, bool) {
    return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
    };

    window.HTMLElement.prototype.__defineGetter__("className", function () {
    return this.getAttribute("class");
    });

    window.HTMLElement.prototype.__defineSetter__("className", function (style) {
    this.setAttribute("class", style);
    });
    }

    })(!!window.Event);
      

  3.   

    T_T
    弄错了貌似梅老师说Object原形尽量干净点好。。所以还是改成这个吧。。
    window.attachEvent = document.attachEvent = window.HTMLElement.prototype.attachEvent = function (property, func, bool) {
    return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
    };
      

  4.   

    把事件分开出来处理吧, 对于像className这样的属性,浏览器可能认不出来,最好适用
    getAttribute("className")
    <script language="javascript">
    <!--
    function init()
    {
       var nodeList = document.getElementsByTagName("dt");
       for (var i = 0; i < nodeList.length; i++)
       {
            nodeList[i].attachEvent("onmouseover",__event);
            nodeList[i].attachEvent("onmouseout",__event); 
       }   
    }function __event()
    {
             var dt = event.srcElement;
             if(dt.getAttribute("className"))
             {
                    dt.className="";
             }
            else
            {
                    dt.className="dt";
            } 
    }
    -->
    </script>
      

  5.   

    <!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=gb2312" />
    <title>Test</title>
    <style type="text/css">
    <!--
    body {
    margin-left: 0px;margin-top: 0px;}
    div{
    border:1px #CCCCCC solid; margin:100px; padding:5px; margin-top:100px}
    #menu{
    position:absolute; left:5px; height:400px; width:80px; font-family:"宋体"; font-size:12px; color:#2F3753;}
    #menu dl dt{
    list-style-type:none; text-align:center; border:1px solid #CCCCCC; height:18px; padding-top: 6px; padding-bottom: 2px;}
    .dt{
    background:#999900;}
    #other{
    position:absolute; left:180px; height:400px; width:600px;}
    img{
    height:64px; width:64px; position:absolute; left:45%; top:38%;}
    -->
    </style>
    <script language="javascript">
    window.onload=
    function()
    {
       var num=10;
       document.getElementById("other").innerHTML="<img id='photo' src='images/10.gif' alt='相片' />";
       for(var i=0;i<num;i++)
       {   
          var obj=document.createElement("<dt onclick=\"show("+i+")\"; onmouseover=\"this.className='dt';this.style.cursor='hand'\" onmouseout=\"this.className=''\"></dt>");  
             obj.innerHTML="Title "+i;
             document.getElementsByTagName("dl")[0].appendChild(obj);
       }
    }
    function show(id)
    {
       var img = document.getElementById("photo");
           img.src = "images/"+id+".gif"; 
    }
    </script>
    </head>
    <body>
    <div id="menu"><dl></dl></div>
    <div id="other"></div>
    </body>
    </html>谢谢楼上两位,上面的是我后来改写的虽然实现了功能但对于FF却不支持,这个问题我会学习一楼的方法,再次谢谢帮助我的朋友.