<!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>
<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>
忘记了attach还有返回值。。改变下。。Object的原形。。Object.prototype.attachEvent = function (property, func, bool) {
return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
};
让我在改下。。
(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);
弄错了貌似梅老师说Object原形尽量干净点好。。所以还是改成这个吧。。
window.attachEvent = document.attachEvent = window.HTMLElement.prototype.attachEvent = function (property, func, bool) {
return this.addEventListener(property.replace(/^on/, ""), func, bool || false);
};
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>
<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却不支持,这个问题我会学习一楼的方法,再次谢谢帮助我的朋友.