Schuifregelaar voor de helderheid van een afbeelding

Hieronder zie je een foto met een schuifregelaar. Als je die naar links beweegt wordt de foto donkerder, tot bijna zwart. Als je de regelaar naar rechts beweegt, wordt de foto lichter, tot bijna wit. Je gaat terug naar de beginsituatie door op de knop "Reset" te klikken.

Op deze pagina wordt uitgelegd hoe je zoiets maakt. De code kun je downloaden om zelf te gebruiken, echter zonder de foto.

• Er worden twee items besproken:
  1. De werking van het script.
  2. Toepassen in je eigen site.
   
• De code bestaat uit HTML, CSS en JavaScript. In het voorbeeld staat alles in het document, maar gelinkte bestanden kunnen natuurlijk ook.
• Feitelijk worden er twee zaken behandeld: Het veranderen van de helderheid van de foto en het veranderen van de opmaak van de schuifregelaar.
• Inspiratie voor dit item is ontstaan door een toepassing op internet, waar het effect op het hele document werkt. Op deze site werkt het alleen op een enkele foto.
   
• De werking van het script
• Als je de schuifregelaar verzet wordt door JavaScript de CSS-eigenschap filter:brightness() aangepast. De beginwaarde is 100. Bij brightness < 100 wordt de foto donkerder, in het voorbeeld minimaal 30. Bij brightness > 100 wordt de foto lichter, in het voorbeeld maximaal 500.
  De minimale waarde van brightness volgens de standaard is nul (diepzwart). Er lijkt geen maximum te zijn; zuiver wit wordt met de foto van het voorbeeld niet gehaald.
• Door op Reset te klikken ga je terug naar de beginsituatie.
• De schuifregelaar is een standaard HTML-element, waarvan de opmaak door CSS is veranderd.
   
• HTML
• De HTML van het voorbeeld bestaat uit een <button>-tag voor de Reset-knop en een <div>-tag die de foto en de schuifregelaar bij elkaar houdt. Deze heeft de klasse wrapper en wordt ook gebruikt om de foto en de regelaar in de regel te centreren.
• Een klik op de knop activeert de function initSlider() via onclick.
• De foto is een gewone<img>-tag. Voor de communicatie met JavaScript heeft deze de id foto.
• De schuifregelaar is gemaakt met <input type="range">. De standaard-opmaak is geheel overschreven met CSS-eigenschappen. Voor de communicatie met JavaScript heeft deze de id helderheid.
• Als de stand van de regelaar wordt veranderd, wordt de function funHelderheid(this) aangeroepen via onchange. Deze verandert de helderheid van de foto. Via de parameter this wordt aangegeven dat de waarde uit de schuifregelaar zelf moet worden gehaald.
   
• CSS
• De knop is opgemaakt met een style-attribuut in de HTML-tag.
• De wrapper houdt de foto en de schuifregelaar bij elkaar en positioneert het geheel in het midden van de regel. De breedte is gelijk aan de breedte van de foto: 250px. De hoogte is zodanig gekozen dat de foto en de regelaar er boven elkaar goed in passen.
• De balk en de knop van de schuifregelaar worden apart opgemaakt. Voor beide geldt dat de standaard-opmaak van de browser moet worden uitgeschakeld (appearance:none). De 'eigen' opmaak moet vervolgens zelf worden ingesteld.
• De balk, met id helderheid, is even breed (100%) als de wrapper en de foto. De hoogte van de balk is 6px, de uiteinden zijn afgerond. De kleur is blauw en er is geen geen buitenrand (outline:none). De cursor is ingesteld op pointer, om aan te geven dat er "iets" kan worden gedaan.
   
• De schuifknop is onderdeel van de regelaar. Daarom wordt die opgemaakt met een pseudoklasse. De instelling van de schuifknop is browser-afhankelijk, je moet dus vendor-prefxes gebruiken. Voor Edge, Chrome, Opera en Safari gebruik je -webkit-slider-thumb. Voor FireFox gebruik je -moz-range-thumb.
  Let op de verschillende namen na de prefix.
• De prefixen zijn niet-standaard. Om het te laten werken moet je twee dubbele punten gebruiken, zie de code verder op deze pagina.
• De inhoud (eigenschappen) van de CSS-blokken zijn bijna identiek. Alleen voor FireFox moet je border:0; toevoegen om de rand rond de schuifknop weg te krijgen
• De schuifknop wordt als een gevulde cirkel gemaakt. De achtergrondkleur is navy.
   
• JavaScript
• Als de pagina is geladen wordt de function initSlider() gestart via window.onload. Deze function zet de helderheid van de foto op 100% en de schuifregelaar op 100. Deze function wordt ook aangeroepen als er op Reset wordt geklikt.
• Als de knop van de regelaar wordt verschoven wordt de function funHelderheid() gestart via onchange. Deze function haalt de stand van de regelaar op en verandert de waarde van de CSS-eigenschap filter:brightness(). Dit gaat met een omweg: in plaats van de CSS direct te veranderen, wordt het inline style attribuut van de img-tag veranderd.
   
• Toepassen in je eigen site
• Download de .zip-file en pak hem uit. Bouw de code op zoals hier onder is aangegeven.
• Regel een geschikte foto. Pas in de <img>-tag de attributen width en height aan. Doe dat ook in de CSS van wrapper.
• Verander eventueel de kleuren naar je eigen smaak. Pas eventueel de hoogte van de schuifbalk (met of zonder afrondingsstraal) aan, pas de diameter van de schuifknoppen aan.
• Verander desgewenst de positie van de Reset-knop, of laat hem helemaal weg.
  N.B.: Weglaten van de knop heeft geen verandering van het JavaScript tot gevolg.
• Verander desgewenst de positie van wrapper.
• De opmaak van de schuifknop, in de pseudo-klassen -webkit-slider-thumb en -moz-range-thumb, staat in twee aparte blokken. Die kunnen niet worden samengevoegd.

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>).

<style>
.wrapper {
  width:250px; height:217px;
  margin:0 auto;
  box-sizing:border-box;
}
#helderheid {
  width:100%; height:6px;
  margin:10px auto;
  appearance:none;
  border-radius:3px;
  background:#09c;
  outline:none;
  cursor:pointer;
}
#helderheid::-webkit-slider-thumb {
  appearance:none;
  width:12px; height:12px;
  border-radius:50%;
  cursor:pointer;
  background:navy;
}
#helderheid::-moz-range-thumb {
  appearance:none;
  width:12px; height:12px;
  border-radius:50%;
  border:0;
  cursor:pointer;
  background:navy;
}
</style>
 
<script>
function initSlider() {
  document.getElementById('helderheid').value = "100";
  document.getElementById('foto').setAttribute("style", "filter:brightness(100%);");
}
window.onload = initSlider;
function funHelderheid(e) {
  let xx = document.getElementById('foto');
  let val = e.value;
  xx.setAttribute("style", "filter:brightness("+val+"%);");
}
</script>

(Zet dit in de <BODY> op de plaats waar het effect moet verschijnen.)

<button style="float:right;margin-right:10px;color:navy;
      font-weight:bold;font-size:110%"
      onclick="initSlider()">Reset</button>
<div class="wrapper">
  <img src="foto.jpg" alt="Molen" title="Beweeg de schuifregelaar
      en zie wat er gebeurt" width="250" height="187" id="foto">
  <input type="range" id="helderheid" min="30" max="500"
      value="100" onchange="funHelderheid(this)">
</div>

Downloaden:
 
Druk op de knop:  File: voorb746.zip, 845 bytes.

Opmerking:
 
Behalve de helderheid kunnen ook andere eigenschappen, zoals contrast en verzadiging, met deze techniek worden aangepast.