Website Tips
Home • html-css • mouseover plaatje
Google Translation
Uw ip is: 50.16.166.175

Mouseover plaatje met css

Een plaatje op laten lichten d.m.v. een mouseover kun je maken door een paar regeltjes toe te voegen aan de code van je plaatje. In de CSS zet je de opacity ervan. Het voordeel van deze methode t.o.v. een mouseover met javascript is dat je maar 1 plaatje nodig hebt en dus niet allemaal donkere plaatjes hoeft te gaan zitten maken.

Wat je doet is de volgende regel in je CSS file zetten:

.opa{
opacity:0.6;
filter:alpha(opacity=60);
}


En je HTML image tag kom er dan zo uit te zien:

<img class="opa" src="images/plaatje.jpg" alt="plaatje" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.6;this.filters.alpha.opacity=60" />

Een voorbeeldje hiervan staat op de zoekmachines pagina, de helderheid van de vlaggetjes gaat van 60 naar 100% bij een mouseover.


Het kan ook anders en ziet er wat beter uit op deze manier:

HTML
<a class="light" href="http://www.copyrightvrijeplaatjes.nl/snews/"
title="Copyright vrije plaatjes" target="_blank">
<img width="50" height="50" src="images/logo.jpg" alt="Logo" />
</a>

CSS
.light img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
}

.light:hover img{
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}



Reageer (0) 10.05.2010. 00:25




Rap Omhoog