HTML and CSS Reference
In-Depth Information
EXAMPLE
15.24 (
CONTINUED
)
--------------------------------------------------
<html>
<head><title>Positioning</title>
1
<link rel=stylesheet type="text/css" href="externstyle.css"
>
<script type="text/javascript">
var div1,div2,div3;
2
window.onload=function (){
3
div1=document.getElementById("first");
div2=document.getElementById("second");
div3=document.getElementById("third");
4
if(
div1.addEventListener!= undefined
){
//
W3C Firefox Opera
5
div1.addEventListener('mouseover',unColorText,false);
div1.addEventListener('mouseout', colorText,false);
div2.addEventListener('mouseover',unColorText,false);
div2.addEventListener('mouseout', colorText,false);
div3.addEventListener('mouseover',unColorText,false);
div3.addEventListener('mouseout', colorText,false);
}
6
else{ //
Internet Explorer
div1.attachEvent('onmouseover',unColorText);
div1.attachEvent('onmouseout', colorText);
div2.attachEvent('onmouseover',unColorText);
div2.attachEvent('onmouseout', colorText);
div3.attachEvent('onmouseover',unColorText);
div3.attachEvent('onmouseout', colorText)
}
}
7
function colorText(e){
8
var evt = e || window.event;
//
Browser differences
9
var evtTarget= evt.target
|| evt.srcElement;
10
if(evtTarget.id=="first"){
div1.className="red"
;
}
else if(evtTarget.id == "second"){
div2.className="blue";
}
else{ div3.className="green";}
}
11
function unColorText(e){
var evt = e || window.event;
//
use e.srcElement.id (IE)
var evtTarget= evt.currentTarget
|| evt.srcElement;
if(evtTarget.id == "first"){
div1.className="black";
}
else if(evtTarget.id == "second"){
div2.className="black";
}
