13 svar · 503 visningar · startad av Conartis
Hej, sitter och klurar på hur man ska kunna länka så att det öppnas olika bilder i en tabell. Te x så ska "start" öppna en bild medans "länkar" ska öppna en annan bild i samma tabellruta.
Tack på förhand
Enklast är att använda <iframe> i den aktuella cellen.
Annars får du ta till lite dhtml (dölj/visa lager)
Går att lösa utan lager och iframe också. Med lite vanlig hederlig javascript.
Nåt i stil med detta borde nog funka:
<a href="javascript:document.images['bildnamn'].src = 'bild2.gif';">länk<a>
Problemet blir väl att sätta "target" på en cell?
(fattade det som att länken och bilden inte är i samma cell)
Sätt en bild i cellen som är helt transparant. Sedan kan du byta ut den bilden mot andra.
Precis, bilden och länken är inte i samma cell.
Spelar ingen roll om bilden och länken är i samma cell.
Men det är det som dom inte är. Hur ska man få det som du skrev att fungera när dom inte är i samma cell hur ska man sätta target på cellen som bilden ska hamna i? Funkar det med "anchor name då?
Om man använder sig av "anchor name" så kan man ju länka till den specifika cellen, men hur får man till det så att bilden byts i anchor name cellen?
Typ såhär:
<a href="#anchor" onClick="javascript:document.images['bildnamn'].src = 'bild2.gif';">länk<a>
Verkar svårlöst, av svaren att döma!
Här har jag i alla fall gjort ett färdigt exempel,
som du sen kan anpassa som det passar dig.
<html>
<head>
<title>lek_med_bilder</title>
<style type="text/css">
body {background-color:lightblue; font-family:arial, verdana; font-size:12px; color:blue;margin:5px;}
table
{background-color:green;width:90%; height:100%; border-collapse:collapse;border:2px solid black;}
.td1
{ width:20%; height:100%; border-collapse:collapse;border:2px solid black}
.td2
{ width:80%; height:100%; border-collapse:collapse;
border:2px solid black}
a:link
{ font-size:12px; color:yellow; text-decoration:none; cursor:hand;}
#bild1 {display:none;}
#bild2 {display:none;}
#bild3 {display:none;}
#bild4 {display:none;}
#bild5 {display:none;}
#bild6 {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 bgcolor="#C2C287" text="#000000" id="all" leftmargin="10" topmargin="10" marginwidth="10" marginheight="10" link="#660000" vlink="#660000" alink="#660000">
<table rowspan=1 colspan=2 cellpadding=0 cellspacing=0>
<tr>
<td class=td1>
<A HREF OnMouseOver="bild('bild1');" OnMouseOut="bild('bild1');">START</A>
<BR>
<A HREF OnMouseOver="bild('bild2');" OnMouseOut="bild('bild2');">LÄNKAR</A>
<BR>
<A HREF OnMouseOver="bild('bild3');" OnMouseOut="bild('bild3');">BILDER</A>
<BR>
<A HREF OnMouseOver="bild('bild4');" OnMouseOut="bild('bild4');">PROGRAM</A>
<BR>
<A HREF OnMouseOver="bild('bild5');" OnMouseOut="bild('bild5');">ÖVRIGT</A>
<BR>
<A HREF OnMouseOver="bild('bild6');" OnMouseOut="bild('bild6');">ANNAT SKRÄP</A>
<BR>
Se info under tabellen
</td>
<td>
<div>
<td class=td2 id="bild1"><IMG SRC=001.jpg width=480 height=360></td>
<td class=td2 id="bild2"><IMG SRC=002.jpg width=480 height=360></td>
<td class=td2 id="bild3"><IMG SRC=003.jpg width=480 height=360></td>
<td class=td2 id="bild4"><IMG SRC=004.jpg><BR>Lite text under bilden kanske ?</td>
<td class=td2 id="bild5"><IMG SRC=005.jpg><BR>Lite text under bilden kanske ?</td>
<td class=td2 id="bild6"><IMG SRC=006.jpg><BR>Lite text under bilden kanske ?</td>
<div>
</td>
</tr>
</table>
<TD>
Tabell med endast en rad och två kolumner.
<BR><BR>
Scriptet känner av bildens storlek, jag har satt bildstorlek 480x360 som maxstorlek i högra kolumnen.
<BR>
för START, LÄNKAR o BILDER (vilket inte behövs). (för muspekaren över) .
<BR>
Övriga länkar visar bilden rätt oavsett storlek.
<BR><BR>
Är ursprungsbilden större än angiven storlek i koden
<BR>
så visas den förminskad inom denna yta.
<BR><BR>
Obs! om man anger annan bildstorlek än ursprungsbilden
<BR>
så måste det anges proportionellt, annars förvrängs ju bilden
<BR>
Du kan även labba med OnClick på textlänkarna.
</TD>
</body>
</html>
Tackar för all hjälp, ska prova det där så snart jag får tid.