esempio veloce
codice:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>table rows: rollover and exclusive click</title>
<style type="text/css">
table {
border-collapse:collapse;
border:1px solid #f0f0f0;
}
td {
padding:.5em;
cursor:pointer;
}
tr.over {
background-color:#0f0;
}
tr.clic {
background-color:#ff0;
}
</style>
<script type="text/JavaScript">
/*<![CDATA[*/
var trOn,src=null;
function is_contained(el,into){
while(el.parentNode) if((el=el.parentNode)==into) return true;
return false;
}
function over(e){
if(!e) e=event;
src=(e.target)?e.target:e.srcElement;
if(src.tagName=="TABLE"||src.tagName=="TBODY") return;
while(src.tagName!="TR") src=src.parentNode;
if (src!=trOn) src.className='over';
}
function out(e){
if(!e) e=event;
if(is_contained(e.toElement||e.relatedTarget,src)||src==trOn) return;
src.className='';
}
function clic() {
if(trOn) trOn.className='';
if(src!=trOn) {
src.className='clic';
trOn=src;
}
else trOn=null;
}
/*]]>*/
</script>
</head>
<body>
<table onmouseover="over(event)" onmouseout="out(event)" onclick="clic()">
<tbody>
<tr><td>[a1] 1</td><td>[a2] 2</td></tr>
<tr><td>[b1] 3</td><td>[b2] 4</td></tr>
<tr><td>[c1] <span>5</span></td><td>[c2] 6</td></tr>
<tr><td>[d1] 7</td><td>[d2] 8</td></tr>
</tbody>
</table>
</body>
</html>
ciao
.
Rispondi quotando
