Dovrei realizzare un particolare effetto su una tabella. Esempio:
tabella semplice semplice: 3 righe, 1 colonna
muovendo il mouse sulla prima riga, cambia il bordo di tutta la tabella
muovendo il mouse sulla seconda riga, cambia il bordo solo della seconda riga
muovendo il mouse sulla terza riga, cambia il bordo solo della terza riga
tipo cosi:
Il problema, come potete vedere, è il bordo ai latiCodice PHP:<html>
<head>
<style type="text/css">
table {
width: 300px;
background-color: gray;
}
table tr td{
border-color: gray;
border-style: solid;
}
</style>
</head>
<body>
<script type="text/javascript">
function bordotop(){
document.getElementById('riga1').style.borderLeftColor='yellow';
document.getElementById('riga2').style.borderLeftColor='yellow';
document.getElementById('riga3').style.borderLeftColor='yellow';
document.getElementById('riga1').style.borderRightColor='yellow';
document.getElementById('riga2').style.borderRightColor='yellow';
document.getElementById('riga3').style.borderRightColor='yellow';
document.getElementById('riga1').style.borderTopColor='yellow';
document.getElementById('riga3').style.borderBottomColor='yellow';
}
function ripristinatop() {
document.getElementById('riga1').style.borderLeftColor='gray';
document.getElementById('riga2').style.borderLeftColor='gray';
document.getElementById('riga3').style.borderLeftColor='gray';
document.getElementById('riga1').style.borderRightColor='gray';
document.getElementById('riga2').style.borderRightColor='gray';
document.getElementById('riga3').style.borderRightColor='gray';
document.getElementById('riga1').style.borderTopColor='gray';
document.getElementById('riga3').style.borderBottomColor='gray';
}
function bordo(riga) {
riga.style.borderColor='yellow';
}
function ripristina(riga) {
riga.style.borderColor='gray';
}
</script>
<table cellpadding="0" cellspacing="0" style="">
<tr >
<td id="riga1" onmouseover="bordotop();" onmouseout="ripristinatop()">a</td>
</tr>
<tr>
<td id="riga2" onmouseover="bordo(this);" onmouseout="ripristina(this)">b</td>
</tr>
<tr>
<td id="riga3" onmouseover="bordo(this);" onmouseout="ripristina(this)">c</td>
</tr>
</table>
</body>
</html>
che cosa proponete?
Rispondi quotando
