Ja, du kan ju alltid kolla på ett ett script som jag exprimenterade med för nåt år sedan.
Detta är inte riktigt färdigt, men har de funktioner du sökte,
ändra bara till Onclick i.s.f mouseOver.
Tabellegenskaperna och positionering får du också fixa till.
Bildstorlek behövs dock inte då scriptet känner av detta.
Kanske kan va nåt att bygga vidare på?
<html>
<head>
<title>lek_med_bilder</title>
<style type="text/css">
.td {position:absolute; left:25%; top:15%}
a {cursor:hand;}
#bild1 {display:none;}
#bild2 {display:none;}
#bild3 {display:none;}
#bild4 {display:none;}
#bild5 {display:none;}
#bild6 {display:none;}
#bild7 {display:none;}
#bild8 {display:none;}
</style>
<script type="text/javascript" language=javascript>
<!--
function bild(currPic){thisText=document.getElementById(currPic).style
if (thisText.display == "block"){thisText.display="none"}
else { thisText.display = "block" } }
-->
</script>
</head>
<body>
<table width=100% height=100% cellspacing=3 cellpadding=3 border=2 bordercolor=black>
<tr height=15%>
<td >
<A HREF OnMouseOver="bild('bild1');" OnMouseOut="bild('bild1');"><img src=001.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild1"><IMG SRC=001.jpg width=400 height=300></td>
</td>
<td>
<A HREF OnMouseOver="bild('bild2');" OnMouseOut="bild('bild2');"><img src=002.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild2"><IMG SRC=002.jpg width=400 height=300></td>
</td>
<td>
<A HREF OnMouseOver="bild('bild3');" OnMouseOut="bild('bild3');"><img src=003.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild3"><IMG SRC=003.jpg width=400 height=300></td>
</td>
</tr>
<tr height=70%>
<td >
<A HREF OnMouseOver="bild('bild4');" OnMouseOut="bild('bild4');"><img src=004.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild4"><IMG SRC=004.jpg width=400 height=300></td>
</td>
<td>
Tom cell
</td>
<td>
<A HREF OnMouseOver="bild('bild5');" OnMouseOut="bild('bild5');"><img src=005.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild5"><IMG SRC=005.jpg width=400 height=300></td>
</td>
</tr>
<tr height=15%>
<td >
<A HREF OnMouseOver="bild('bild6');" OnMouseOut="bild('bild6');"><img src=006.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild6"><IMG SRC=006.jpg width=400 height=300></td>
</td>
<td>
<A HREF OnMouseOver="bild('bild7');" OnMouseOut="bild('bild7');"><img src=007.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild7"><IMG SRC=007.jpg width=400 height=300></td>
</td>
<td>
<A HREF OnMouseOver="bild('bild8');" OnMouseOut="bild('bild8');"><img src=008.jpg width=30 height=30 title="din bildbeskrivning"></A>
<td class=td id="bild8"><IMG SRC=008.jpg width=400 height=300></td>
</td>
</tr>
</table>
</body>
</html>
