Plaatje met geanimeerde link

Hieronder zie je twee plaatjes, elk met daaroverheen een tekst. Een plaatje met tekst vormt een link.
Als je er met de muis overheen gaat verschuift de tekst naar boven en wordt de afbeelding minder helder. Als de muispijl het plaatje verlaat, wordt de beginsituatie hersteld.
Als je er op klikt of tikt verschijnt er een alert die meldt dat er is geklikt.
Op deze bladzijde wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de plaatjes.

Paddenstoel Roos

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• Inspiratie voor dit item is ontstaan door de website cvandaag.nl, een christelijk informatie platform. Voor deze site heb ik het effect nagebouwd. Het effect is van cvandaag verdwenen.
• Als er geen muis beschikbaar is, zoals bij een mobiele telefoon, wordt het effect zichtbaar als een plaatje lang wordt vastgehouden. Het donker worden van het plaatje en het bewegen van de tekst gaat na elkaar in plaats van tegelijkertijd. De oorspronkelijke situatie wordt hersteld als je ergens anders op het scherm tikt.
• Om het voor een aanraakscherm een beetje werkbar te houden, is de rechter muisknop uitgeschakeld door aan de <div> met klasse wrapper het attribuut onContextMenu="return false" zie ook het item Rechter muisknop uitschakelen II.
   
• De werking van het script
• De code van het voorbeeld is gemaakt met HTML, CSS (in de file styles.css) en JavaScript (in de file script.js). Om het te gebruiken moet je aanpassingen doen in alle drie de code-onderdelen.
   
• HTML
• Er zijn twee plaatjes. Over elk plaatje beweegt een tekst. Elk plaatje is een gewone <img>-tag met een uniek id. Elke tekst zit in een <span>-tag met een uniek id, de klasse tekst en een voor die tag specifieke klasse.
• De id's worden gebruikt om de helderheid van plaatjes te veranderen en de tekst te laten bewegen, via JavaScript.
• Het plaatje en de tekst worden bij elkaar gehouden in een <span>-tag met de klasse cel. Elke cel heeft een uniek id, dat wordt gebruikt om er met JavaScript een hyperlink van te maken.
• De twee cellen worden gepositioneerd in het document en bij elkaar gehouden met een <div>-tag met de klasse wrapper.
   
• Er zit een patroon in de naamgeving van de id's en de classes. Dat helpt om de vele namen goed te beheren.
   
• CSS
• De CSS begint met de klasse wrapper. Deze dient om de plaatjes bij elkaar te houden en is daarom iets breder dan de twee plaatjes samen. In het voorbeeld is dat 505px. Daardoor is een kleine tussenruimte tussen de plaatjes mogelijk.
  In de HTML-code staan de beide <span>-tags onder elkaar. Daardoor zet de HTML-processor er een spatie (ca. 5px) tussen. Daarom is wrapper 505px breed (elke cel> is 250 px breed).
  De hoogte van wrapper is wel gelijk aan de hoogte van de plaatjes.
• wrapper wordt ook gebruikt om de twee plaatjes te positioneren en heeft daarom margin:0 auto.
• De klasse cel wordt gebruikt om een plaatje en de tekst bij elkaar te houden. De position is relative (ten opzichte van wrapper) en is in de linkerbovenhoek geplaatst (top:0; left:0;). Een tweede cel wordt naast de eerste cel gezet zolang er plaats is in wrapper, anders wordt de tweede cel onder de eerste gezet.
• De margin en de <>padding van cel zijn nul, zodat zeker is dat de inhoud van cel correct wordt geplaatst.
• De klasse cel is ook nog uitgebreid met img en img:hover. Hier wordt de vloeiende overgang van helder naar donker (en omgekeerd) geregeld in een transition. De mate van helderheid (50% of 100%) wordt geregeld via JavaScript, maar staat hier ook genoemd in de eigenschap filter:brightness() omdat het anders niet goed werkt op (mobiele) apparaten met een aanraakscherm.
• De tekst die over de plaatjes beweegt heeft de klasse tekst. Hier wordt opmaak ingesteld die geldt voor alle teksten. De positionering is absoluut (binnen cel). Hier staat ook z-index:1; bij om te zorgen dat de tekst altijd boven de plaatjes zweeft (en niet door de plaatjes wordt bedekt).
• Naast tekst heeft de tekst "Paddenstoel" ook de klasse tekst_1. De tekst bevindt zich op 15px van de onderrand van cel (lees: het plaatje). Dat wordt door JavaScript veranderd en teruggezet. Er is ook een transition gedefinieerd om de beweging vloeiend te laten verlopen.
• tekst_1 heeft ook margin:0 36px;. Hiermee wordt het woord "Padenstoel" gecentreerd in het plaatje gezet. text-align:center werkt hier niet!
• Naast tekst heeft de tekst "Roos" ook de klasse tekst_2. Dat werkt op dezelfde manier als tekst_1.
   
• JavaScript
• Als eerste wordt een tweetal variabelen ingesteld:
  •  bottomI bevat de afstand (in pixels) tussen de tekst in ruststand en de onderkant van het plaatje.
  •  bottomA bevat de afstand (in pixels) tussen de tekst en de onderkant van het plaatje, als de muis er overheen gaat.
• Het JavaScript wordt alleen uitgevoerd zodra de pagina is geladen. Er worden referenties gemaakt naar elk element dat deel uitmaakt van een class="cel":
  •  variabele plaatje1 verwijst naar het plaatje van de paddenstoel.
  •  variabele tekst1 verwijst naar de tekst "Paddenstoel".
  •  variabele link1 verwijst naar id="link_1", die het plaatje en de tekst bevat.
  •  variabele plaatje2 verwijst naar het plaatje van de roos.
  •  variabele tekst2 verwijst naar de tekst "Roos".
  •  variabele link2 verwijst naar de id="cel", die het plaatje en de tekst bevat.
  Let op de systematiek in de naamgeving van de variabelen.
• Na het instellen van de variabelen worden de event listeners gemaakt:
  •  plaatje1 luistert naar mouseenter. De CSS-eigenschap bottom krijgt de waarde bottomA waardoor deze naar boven schuift. De helderheid wordt op 50% gezet.
  •  tekst1 luistert naar mouseover. De function doet hetzelfde als de listener voor mouseenter van plaatje1. Dit is nodig om te voorkomen dat mouseleave wordt afgevuurd door plaatje1, waardoor het effect verloren gaat.
  •  plaatje1 luistert ook naar mouseleave. De CSS-eigenschap bottom krijgt de waarde bottomI waardoor deze terug schuift naar beneden. De helderheid wordt op 100% gezet.
  •  link1 luistert naar click. De function doet hetzelfde als de listener voor mouseleave van plaatje1, maar er volgt nog een actie. In het voorbeeld is dat een alert, maar in de praktijk zul je iets gebruiken zoals
  location.href="https://www.webmasterij.nl" of iets dergelijks.
• Het maken van event listeners voor plaatje2 enz. gaat op dezelfde manier.
   
• Toepassen in je eigen site.
• Download de .zip-file en pak hem uit. Zet de HTML-code in je document. Regel twee plaatjes van 250 × 187 pixels en zet de bestandsnamen in de HTML. Je hebt nu een werkend voorbeeld.
• Voeg HTML, JavaScript en CSS toe voor elk extra plaatje-met-tekst, of verwijder het juist.
• Pas de eigenschappen width en height aan in de klassen wrapper en cel. Stel ook de positie van wrapper in, op de door jou gewenste plaats: Links, rechts, …. Gebruik daar margin voor.
  N.B.: Als je dit effect op verschillende plaatsen in je document wilt hebben, kan het gebeuren dat er meerdere wrappers nodig zijn. Het beste geef je die elk een unieke naam, net als bij de overige klassen.
• Bepaal welke tekst op welk plaatje komt en zet die in de HTML. Bepaal de tekstgrootte en de kleur. Zet die in de klasse tekst.
• Stel de marges in voor de klassen tekst_1, tekst_2, …. Gebruik eventueel een schermlineaal om de tekstbreedte op te meten. De marge is dan: ½(breedte plaatje − breedte tekst). Merk op dat text-align:center hier niet werkt!

Gebruik:

• De code staat gedeeltelijk in de <HEAD> en gedeeltelijk in de <BODY>.

De code van het voorbeeld ziet er als volgt uit:
 
(Zet dit in de <HEAD>).

<link rel="stylesheet" href="styles.css">
<script src="script.js"></script>

(Zet dit in de <BODY> op de plaats waar de plaatjes moeten verschijnen).

<div class="wrapper">
  <span class="cel" id="link_1">
    <span id="tekst_1" class="tekst tekst_1">Paddenstoel</span>
    <img id="pl_1" src="plaatje-1.jpg">
  </span>
  <span class="cel" id="link_2">
    <span id="tekst_2" class="tekst tekst_2">Roos</span>
    <img id="pl_2" src="plaatje-2.jpg">
  </span>
</div>

Downloaden:
 
Druk op de knop:  File: voorb620.zip, 1404 bytes.