Nodig: Microsoft Internet Explorer.
Mozilla Firefox kan maar gedeeltelijk met de voorbeelden hieronder overweg.

 

De hover-functie (CSS) - deel 2

In deel 1 heb ik het hover-effect in relatie met tekst besproken. Nu gaan we het hebben over afbeeldingen. Als je je muis over de afbeelding hieronder beweegt, zie je dat plaatje nummer 1 vervangen wordt door plaatje nummer 2.

Dus wat je nodig hebt zijn 2 plaatjes. En verder een stukje CSS-script plus de HTML-code.

Dit komt tussen de style tags:

a.image {
display: block;
width: 100px;
height: 100px;
background-image: url(v232.gif);
background-repeat: no-repeat;
}

a.image:hover {
background-image: url(v233.gif);
}

en dit is de HTML-code die tussen de body-tags komt:

<a class="image" href="#"></a>

* * *

Voor dit voorbeeld hebben we maar 1 plaatje nodig. Het plaatje zoals we het nu zien heeft een opacity-waarde van 50. Ga je met de muis eroverheen dan verandert de opacity-waarde in 100. Met andere woorden: er is geen transparantie. Je ziet het originele plaatje. Aan het onderwerp 'opacity' heb ik uitgebreid aandacht besteed in mijn opacity-tutorials.

Dit komt tussen de style tags:

a.linkopacity img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}

a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }

en dit is de HTML-code voor de body tags:

<a class="linkopacity" href="#"><img src="v227.gif" border="0" style="border:1px solid black;" width="100" height="100" alt="plaatje van Mandarin Design"></a>

* * *

Ten slotte hieronder wat plaatjes met tekst. Dat wil zeggen ... het lijken plaatjes. Als je met je muis eroverheen gaat, veranderen ze van kleur en zijn ze aanklikbaar. Toch zijn het geen plaatjes. Alles wat je hier ziet is gemaakt met CSS!

JASC PSP 7 JASC PSP 8 JASC PSP 9 JASC PSP Studio JASC Photo Album 5

Deze buttons zijn zo klein dat je ze in je tekst kan inpassen: URLPIXY Dat wil zeggen: in IE zien de buttons er uit zoals hierboven maar dat geldt niet voor Firefox! Firefox laat ze groter zien.
Al dit moois is verzonnen door Petr Staníček, ook bekend als 'Pixy'. Over deze in-line buttons heeft hij een zeer interessant artikel geschreven. De code voor de buttons zit er ook bij.

* * *

---

Zie ook deel 1 en deel 3

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal