Sicuramente è fatto coi DIV e CSS; ma siccome resto un aficionado delle TABLE, ti posto questo per cominciare a studiarci un po' su'; ho messo anche il cambio del puntatore freccia/manina, usando style="cursor: ;" :
P.S.: Sono immagini.jpg non leggerissime (130-180 Kb), attendi un attimo per il primo download se subito non ti appaiono; dipende anche dalla connessione: io ho la tipica Alice 20 Mega che va a 2,46 Mega, però.codice:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head><title>TD buttons turning IMG SRC</title> <script type="text/javascript"> var content = new Array(); content[0] = ""; content[1] = "http://www.cameraworkphotographers.com/002ITALIA.jpg"; content[2] = "http://www.cameraworkphotographers.com/003ITALIA.jpg"; content[3] = "http://www.cameraworkphotographers.com/004ITALIA.jpg"; content[4] = "http://www.cameraworkphotographers.com/009ITALIA.jpg"; content[5] = "http://www.cameraworkphotographers.com/008ITALIA.jpg"; var facing = "1"; function change(which){ var cell = document.getElementById("quadr").getElementsByTagName("td"); cell[facing].bgColor = "#EFEFEF"; cell[facing].style.cursor="pointer"; document.getElementById("field").src =content[which]; cell[which].bgColor = "aqua"; cell[which].style.cursor="default"; facing = which; } </script> </head> <body bgcolor="#444440" style="font-family: Trebuchet MS, Helvetica, Arial;"> <div align="center"> <table id="quadr" border="1" cellpadding="8" cellspacing="0" bgcolor="#EFEFEF"><tr> <td rowspan="5"></td> <td onclick='change("1");' width="150" bgcolor="aqua" style="cursor: default;">Content 1 </td></tr> <tr> <td onclick='change("2");' style="cursor: pointer;">Content 2 </td></tr> <tr> <td onclick='change("3");' style="cursor: pointer;">Content 3 </td></tr> <tr> <td onclick='change("4");' style="cursor: pointer;">Content 4 </td></tr> <tr> <td onclick='change("5");' style="cursor: pointer;">Content 5 </td></tr> </table> </div> </body> </html>

</td>
<td onclick='change("1");' width="150" bgcolor="aqua"
style="cursor: default;">Content 1
</td></tr>
<tr>
<td onclick='change("2");' style="cursor: pointer;">Content 2
</td></tr>
<tr>
<td onclick='change("3");' style="cursor: pointer;">Content 3
</td></tr>
<tr>
<td onclick='change("4");' style="cursor: pointer;">Content 4
</td></tr>
<tr>
<td onclick='change("5");' style="cursor: pointer;">Content 5
</td></tr>
</table>
</div>
</body>
</html>
Rispondi quotando