Target voor een link

[KREEFTMEIJER]

Ik wil op de plaats waar een foto staat, via een link andere foto's plaatsen.
De foto staat op
<div class="gallery">
<img src="images/photo.jpg" width="476" height="270" /><br />
<div>

deze link is als volgt
<a href="images/photo.jpg" target="_parent"><img src="images/photothumb.gif" alt="" width="78" height="58" border="0" /></a>
wat ik ook probeer als target, de foto opent altijd in nieuwe pagina
De site is www.toppages.nlAls je klikt op de link bovenaan NEWS dan zie je het plaatje zoalsik het wil zien ,als je de link volgt HOT TOURS staat er geen foto

 

[csshunter]

Hoi KREEFTMEIJER,

wat ik ook probeer als target, de foto opent altijd in nieuwe pagina

Dat klopt, want een gewone link linkt altijd naar een andere pagina of een ander bestand. Zo kan je niet iets op de pagina zelf veranderen.
Maar dat kan wel met een klein stukje javascript.
Wat je wilt is:

• Bij een klik op elk kleintje ...
• ... bepaal welke grote erbij hoort ...
• ... en wissel dan de bronverwijzing van de getoonde grote ...
• ... naar de bronverwijzing van de grote die bij het geklikte kleintje hoort.

Dit werkt als volgt.

Bij een klik op elk kleintje...
d.w.z. als je op een link een "onclick" uitvoert, zet dan de javascript-functie in werking.
... bepaal welke grote erbij hoort ...
d.w.z. zet in de functie een variabele, die de plaats van de grote foto aangeeft.

We noemen de functie bigPhoto(), en bij elke link op een kleine foto komt dan tussen de haakjes de vindplaats van de grote foto te staan.
In de html wordt het daarmee bijvoorbeeld:

<a href="#" onclick="bigPhoto('images/mtblanc.jpg');return false"><img src="images/mtblanc-thumb.png" alt="" /></a>

Het "return false" staat erbij omdat alleen de functie uitgevoerd moet worden, en niet naar het doel href="#" van de link gegaan moet worden.
Verder geef je in de html de (eerste) grote foto een ID als handvat voor het script:

<img id="bigPhotoImg" src="images/alpen.jpg" alt="" />

Nu de functie zelf.
... en wissel dan de bronverwijzing van de getoonde grote ...
... naar de bronverwijzing van de grote die bij het geklikte kleintje hoort.
Eerst wordt de functie gedefinieerd met:
[JS]function bigPhoto(imgsrc) {
...
}[/JS]
Op de stippeltjes komt te staan wat er moet gebeuren. De "imgsrc" is een tijdelijke dummy-variabele, die bij het in werking zijn de in de html opgegeven bronverwijzing voorstelt. Op deze manier hoeft er niet voor elk kleintje een nieuwe functie geschreven te worden.
Nu pak je de de grote foto vast:
[JS]document.getElementById('bigPhotoImg')[/JS]
en dan vertel je dat de vindplaats (src) van de grote moet zijn: de in de html ingevulde vindplaats bij het bepaalde kleintje. En die hadden we in de dummy-variabele gezet.
[JS]document.getElementById('bigPhotoImg').src = imgsrc;[/JS]
Klaar! De hele functie luidt dus:
[JS]<script type="text/javascript">
function bigPhoto(imgsrc){
document.getElementById('bigPhotoImg').src = imgsrc;
}
</script>[/JS]
Dit scriptje zet je helemaal aan het eind van de html, vlak voor de </body>: dan geeft het geen oponthoud bij het laden van de pagina.

• Het geheel in werking kan je in dit voorbeeld zien:
  www.developerscorner.nl/csshunter/tests/wissellijstje-met-javascript0.htm

Met vriendelijke groet,
CSShunter

 

[KREEFTMEIJER]

Hartelijk Dank

Dit was precies wat ik zocht, ga proberen het aan de gang te krijgen.
Henk

 

[csshunter]

Hoi Henk,
Succes!
Maar ik was nog wat vergeten: in plaats van de href="#" bij de links horen daar eigenlijk óók de links naar de grote foto's te staan. Als javascript uit staat, kan men dan de vergroting toch zien: op een losse pagina. En als javascript aan staat, dan blijft de "return false" werken, en ga je niet naar de losse pagina met alleen de vergroting er op.
En je kunt een title-eigenschap opgeven, zodat een "tooltip" getoond wordt als je over een kleine afbeelding hovert.
Dan wordt het:

<a href="images/alpen.jpg" onclick="bigPhoto('images/alpen.jpg');return false"><img
   title="Franse Alpen: Sixt Fer-à-Cheval" src="images/alpen-thumb.png" alt="" /></a> 
<a href="images/mtblanc.jpg"  onclick="bigPhoto('images/mtblanc.jpg');return false"><img 
   title="Mont Blanc, gezien vanaf Refuge de Bellachat" src="images/mtblanc-thumb.png" alt="" /></a>
enz.

• Dat is dan dit voorbeeld:
  www.developerscorner.nl/csshunter/tests/wissellijstje-met-javascript1.htm

Verder kan je het nog zo mooi maken als je wilt.
Met wat uitbreiding van het javascript kan je de tooltip van de kleine afbeelding ophalen en automatisch als ingemonteerd opschrift of als bijschrift bij de vergroting laten zetten. In de html hoeft daarvoor alleen maar een volgnummertje voor de kleintjes toegevoegd te worden (in de onclick-waarde).

• Dat is deze:
  www.developerscorner.nl/csshunter/tests/wissellijstje-met-javascript.php

Met vriendelijke groet,
CSShunter