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: ;" :
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>
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ò.
Rispondi quotando
