<html>
<head>
<title>Living Background</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0">
<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.id=="backgr1")
document.body.style.backgroundImage="url(backgr1.gif)"
else
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"}function restore(){
document.body.style.backgroundImage=''
}
document.body.ondblclick=restore
-->
</script>
</p>
<p align="center"><span onMouseOver="tile();event.cancelBubble=true">
<img id="backgr1" src="backgr1.jpg" height=96 width=96 border=2>
<img id="backgr2" src="backgr2.jpg" height=96 width=96 border=2><br>
<img id="backgr3" src="backgr3.jpg" height=96 width=96 border=2>
<img id="backgr4" src="backgr4.jpg" height=96 width=96 border=2></span></p></body>
</html>
这是一段切换浏览器背景图片的代码,我很疑惑这里的函数tile()是写在span上的,event.srcElement应该得到"span",为什么反而得到内部"img"呢?而且那个source.src又怎么解释阿?
<head>
<title>Living Background</title>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" marginwidth="0">
<script language="JavaScript1.2">
<!--
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.id=="backgr1")
document.body.style.backgroundImage="url(backgr1.gif)"
else
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"}function restore(){
document.body.style.backgroundImage=''
}
document.body.ondblclick=restore
-->
</script>
</p>
<p align="center"><span onMouseOver="tile();event.cancelBubble=true">
<img id="backgr1" src="backgr1.jpg" height=96 width=96 border=2>
<img id="backgr2" src="backgr2.jpg" height=96 width=96 border=2><br>
<img id="backgr3" src="backgr3.jpg" height=96 width=96 border=2>
<img id="backgr4" src="backgr4.jpg" height=96 width=96 border=2></span></p></body>
</html>
这是一段切换浏览器背景图片的代码,我很疑惑这里的函数tile()是写在span上的,event.srcElement应该得到"span",为什么反而得到内部"img"呢?而且那个source.src又怎么解释阿?
你的意思是说event.cancelBubble=true,除了使不触发上面的对象,还可以指向下面的对象吗?就是说source可以指向内部的标签,而不是单单只是span自己?