Figuren transparant maken met CSS
 |
|
|
|
Hierboven staat vier keer hetzelfde plaatje. Achter de plaatjes staat het logo van deze website.
Het eerste plaatje is "gewoon'. Het tweede plaatje is een beetje doorzichtig, dat zie je aan het site-logo
dat er doorheen komt. Het derde plaatje is doorzichtiger dan het tweede.
Om het vierde plaatje te zien, moet je goed kijken. Het is bijna volledig transparant.
Op deze bladzijde wordt uitgelegd hoe je het aanpakt om plaatjes doorzichtig te maken.
Opmerking: Hoewel dit wordt uitgelegd aan de hand van een paar plaatjes, kun je het ook toepassen op alle HTML-elementen die zichtbaar zijn (of zichtbaar te maken zijn) op het scherm: <p>, <div>, enz.
- Besproken worden :
- De CSS-code om HTML-elementen (hier: plaatjes) doorzichtig te maken.
- De JavaScript-code om de doorzichtigheid te wijzigen
- De CSS-eigenschap die je hier gebruikt heet opacity.
- De letterlijke vertaling van opacity is 'ondoorschijnendheid'.
In het Nederlands zijn de termen 'dekking' of 'dekkingsgraad' meer gangbaar (en gemakkelijker uit te spreken
).
- Opacity geef je aan als een getal tussen 1 (100% dekking) en 0 (0% dekking = 100% transparant).
- Je geeft opacity op in een aparte style sheet, een style block in je HTML-code, of in het
style-attribuut van een element, bijvoorbeeld: <p style="opacity:0.8">
- Zelf ga ik er vanuit dat mensen hun browser-software up-to-date houden, hetzij automatisch, hetzij met de hand.
Daarom codeer ik in principe voor de laatste versie van Edge, FireFox en Chrome.
- Voor de code van de vier plaatjes op deze pagina luidt (van links naar rechts):
<img src="../images/plaatje_0.jpg" alt="" height="100"
width="143" border="0"><img src="../images/plaatje_0.jpg" alt="" height="100"
width="143" border="0" style="opacity:0.9"><img src="../images/plaatje_0.jpg" alt="" height="100"
width="143" border="0" style="opacity:0.5"><img src="../images/plaatje_0.jpg" alt="" height="100"
width="143" border="0" style="opacity:0.3">
De dekkingsgraad veranderen met JavaScript
Als je de dekkingsgraad van een plaatje of ander element wilt veranderen kun je dat doen met JavaScript.
Klik met de muis een paar keer op het plaatje hiernaast. Je zult zien dat het plaatje bij elke klik transparanter
wordt. Als het plaatje helemaal doorzichtig is geworden en je klikt er op komt het weer terug.
De code van het plaatje luidt: (Staat in de <BODY>)
<img src="plaatje_3.jpg" height="100" width="134" border="0"
id="Voorbeeld" onclick="wijzigDekking()"
style="opacity:1">
Behalve de gebruikelijke attributen height, witdh en border, is er ook een id="Voorbeeld"
en onclick="wijzigDekking()". De function wijzigDekking() verandert de dekingsgraad van het plaatje. Deze
function gebruikt de id om het plaatje te 'vinden', zodat het juiste plaatje wordt veranderd.
Om zeker te stellen dat de opacity-eigenschap van het plaatje beschikbaar is voor JavaScript, zodat de eigenschappen
kunnen worden aangepast, is opacity gedefineeerd in het style-attribuut.
De benodigde JavaScript-code hier onder. (Staat in de <HEAD>).
<script type="text/javascript">
var my_dekking = 1;
function wijzigDekking() {
my_dekking -= .2;
if (my_dekking < 0) my_dekking = 1; // Reset opacity naar 1
if (my_dekking < 0.1) my_dekking = 0; // Trucje om
afrondingsfouten op te vangen
document.getElementById('Voorbeeld').style.opacity =
my_dekking;
}
</script>
De 'huidige' dekking wordt in het JavaScript buiten de function wijzigDekking() bewaard. Dat is handiger (en sneller) dan bij elke aanroep van wijzigDekking() de CSS-eigenschap op te halen.
