Skift billede uden at opdatere siden..

Ret simpelt:

<img src="ditBillede.jpg" style="width:54px;height:41px;" onclick="document.images['stortBillede'].src=this.src">

...

<img src="startBillede.jpg" style="width:54px;" name="stortBillede">

-- og hvis det skal være xhtml-kompatibelt eller undgå at bruge name, skal du:

<img src="ditBillede.jpg" style="width:54px;height:41px;" onclick="document.getElementById('stortBillede').src=this.src" />

...

<img src="startBillede.jpg" style="width:54px;" id="stortBillede" />

Hvordan gør jeg hvis jeg også gerne vil have vist noget tekst under det store billede..?

Teksten er forskeligt alt efter hvad billede man har valgt...

Tilføjer noget tekst ...

<img src="ditBillede.jpg" style="width:54px;height:41px;" onclick="document.getElementById('stortBillede').src=this.src;document.getElementById('BilledTekst').innerHTML='Den tekst, du vil skrive ...<br>-- også f.eks. med html i !-)'" />

...

<img src="startBillede.jpg" style="width:54px;" id="stortBillede" />
<div id="BilledTekst">&nbsp;</div>

-- men alt efter formålet og teksternes omfang kan det være fornuftigt at have en javascript-database med indholdet !-)

Det virker næsten...

Den mangler bare at skrive BilledTekst'en når man går ind på siden.. Den skriver det først når man har trykket på en af de små billeder...

BilledTekst'en vil blive udskrevet fra et felt i MySQL

Så sæt din default-tekst ind i div'en, altså den tekst, som hører sammen med startBillede.jpg !-)

-- og velbekomme '-)

Sådan? <div id="BilledTekst">Start tekst...</div>

Takker...

Jeps, præcis ...

-- og jeg takker for point ;~}

Jeg har et lille problem...

Når man klikker på det lille billede så viser den det lille billede, men det skal den ikke den skal vise det store for jeg har gemt 2 billede af det samme: 1.jpg og 1_s.jpg

Det billede der hedder _s er det lille..

Måske kan du bedre forstår mig ved at se dette stykke php kode...:

De små billeder:    echo '<td align="left"><img src="/images/galleri/'.$row['filnavn_s'].'" class="border" onclick="document.getElementById(\'stortBillede\').src=this.src;document.getElementById(\'BilledTekst\').innerHTML=\'.$row['billede_tekst'].'\'"></td>';


Vise det store: echo '<center><img src="/images/galleri/'.$startbillede['filnavn'].'" id="stortBillede"><br><div id="BilledTekst">&nbsp;</div></center>';

F.eks. sådan:

getElementById(\'stortBillede\').src=this.src.replace(/_s\.jpg/,'.jpg');

-- der er medtaget lidt ekstra til sikker streng-genkendelse, men faktisk kan du undlade at tage punktum og fil-type med, hvis du er sikker på, at _s kun forekommer der !-)

-- og du skal selvfølgelig også escape 'erne i replace-teksten !o]

_s forekommer kun der...

Så den skal bare hede: ?
getElementById(\'stortBillede\').src=this.src.replace(/_s\/,'.jpg');

Nej, sådan:

getElementById(\'stortBillede\').src=this.src.replace(/_s/,\'\');

-- og ved nærmere eftertanke skal du nok også, hvis den skal være sikker:

getElementById(\'stortBillede\').src=this.src.replace(/_s\\.jpg/,\'.jpg\');

Takker, nu virker det perfekt..

U'r welcome !-)