Jag ahde tänkt lägga en del bilder i en tabell med 3x3 celler. I de yttre cellerna tänkte jag lägga thumbnails som när de klickas på skulle visas i den mittersta cellen i större format.
Vore tacksam för lite styrning i Javascriptens förlovade land i detta ämne.
Byta bild i annan tabellcell
4 svar · 275 visningar · startad av SDCd
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>
Kanon, serverat på silverfat!
bossse, det är onmouseover, inte OnMouseOver, onMouseOver, ONMOUSEOVER, oNmOuSeOvEr, OnMoUsEoVeR eller något annat.
Om han använder XHTML, ja. Bortsett från avsaknaden av DTD är syntaxen mer lik HTML så elementnamnens bokstavsform kan väljas godtyckligt.
:)