Foto met een link
Je wilt aan een kleine foto in een tekst een grotere foto linken. De grotere foto moet openen in een Popup zodat een bezoeker van je site de grotere foto rustig kan bekijken.
Hoe voeg je dus een link toe aan je kleine foto?
Je plaatst een kleine foto (thumbnail) in je tekst met de JCE editor.
Hoe je dit moet doen heb je kunnen lezen in het vorige artikel.
<img roept een afbeelding op
src= de source met het pad waar de foto staat tussen aanhalingtekens
alt= de alternatieve tekst als een browser de foto niet kan tonen
title= wordt getoond als de muisaanwijzer op de foto ligt
tevens kan de opmaak van de foto nog worden ingeven
De grotere foto staat in dezelfde map maar met een andere naam. In mijn voorbeeld is dat "zonsondergang_groot.jpg"
Hoe kan je de grotere foto linken aan de thumbnail?
Daarvoor moet je eerst nog weten hoe een link wordt opgegeven.
In HTML is iedere link alsvolgt opgebouwd:
<a href="/ ...">de link</a> Tevens kun je nog opgeven of de link in een nieuw browservenster wordt geopend of in het reeds geopende. Voor een bezoeker is het niet altijd aangenaam om met iedere link een nieuw venster te laten openen. Maar het is wel wenselijk het gaat om een link naar een andere website. Deze eigenschap heet "target" en kan zijn "_self" (voor hetzelfde venster) en "_blank" (voor een nieuw venster).
De link voor onderstaande foto met link luidt:
<a href="/images/artikelfotos/zonsondergang_groot.jpg" class="jcepopup zoom-top-right" data-mediabox="1" type="Image/jpeg" data-mediabox-width="400" data-mediabox-title="Zonsondergang"a> <img style="mergin=bottom: 20px; margin-top: 10px; float: left;" src="/images/artikelfotos/zonsondergang_klein.jpg" alt="zonsondergang klein" title"zonsondergang" height="50" width="50" /a>
P.S. Uiteraard kan je ook linken naar een artikel op je website of een externe link invoegen.