Image rollover-effecten zijn een van de gemeenschappelijke kenmerken van het ontwerp van meer geavanceerde websites. Wanneer u de cursor op een afbeelding met een rollover-effect plaatst, verandert de afbeelding uiterlijk totdat u de cursor weg. Er zijn vele methoden voor het maken rollovereffecten, maar een van de meest gestroomlijnde en professionele is om ze te maken in CSS.
Wat die u nodig hebt
- Grafische software
- Tekstverwerker
Maak de twee beelden die nodig zijn voor uw image rollover in uw afbeelding software voor het bewerken en opslaan als jpg-bestanden. Zorg ervoor dat beide afbeeldingen exacte dezelfde pixelafmetingen en hetzelfde bedrag, indien van toepassing, van lege ruimte rond de afbeelding in elke jpg-bestand.
Maak een nieuw document van de afbeeldingen dezelfde breedte als uw beelden en precies twee maal de hoogte van een van beide.
De twee beelden in het nieuwe document plakken. Plaats van de oorspronkelijke afbeelding bovenaan en de rollover-afbeelding onderaan; ze moeten perfect horizontaal worden opgesteld met elkaar en nemen alle beschikbare ruimte in het document. Dit nieuwe bestand opslaan als een jpg en noem deze iets beschrijvend als rolloverimage.jpg. Dit is het enige afbeeldingsbestand dat u wilt voor de rollover gebruiken; u hoeft niet de oorspronkelijke twee.
De afbeelding uploaden naar uw website of naar een gratis image hosting service en sla de volledige URL.
Open het HTML-document in een tekstverwerker en zoek de koptags (
en). Ze moet aan de bovenkant van het document.CSS stijltags tussen de hoofd-tags toevoegen als ze niet reeds aanwezig zijn. De afsluitcodes moeten er zo uitzien: .
Voeg CSS-code tussen de stijltags te definiëren het oorspronkelijke gedrag van uw rollover-afbeelding. De basic-code voor dit is a. {weergeven: blok; width: px; hoogte: px; background: URL () neen-repeat 0 0; overloop: verborgen; tekst-streepje:-10000px; lettertype-grootte: 0px; regelafstand: 0px;}.
Voeg de vereiste waarden in de CSS-code om het toepassen op uw afbeelding te maken. De pixelwaarde van uw rolloverimage.jpg bestand de breedte net voor de eerste px, de pixelwaarde van hoogte van de helft van het bestand net voor de tweede px en de volledige URL van het afbeeldingsbestand tussen de haakjes toevoegen.
Een naam definiëren voor CSS-klasse van de rollover-afbeelding. Dit is wat je zal gebruiken om aan te geven in de HTML-code dat de afbeelding gebruik moet maken van de CSS die u zojuist hebt ingevoerd kan, en het enkel woord dat u wilt. Voer dit woord onmiddellijk na de periode na de eerste een in de CSS-code, zonder spatie ertussen. Bijvoorbeeld, als u wilt bellen van de klasse "rollinover", moet de CSS-code beginnen met a.rollinover.
Voeg een tweede lijn van CSS-code tussen de code die u zojuist hebt ingevoerd en de afsluitende tag van de stijl. Deze lijn zal bepalen wat er gebeurt wanneer de bezoeker de cursor over de afbeelding zweeft. De basic-code voor dit is een: zweven. {achtergrond-positie: 0 -px;}.
De nodige informatie toevoegen aan de tweede regel te maken die van toepassing zijn op uw afbeelding. De naam van de klasse die u gedefinieerd onmiddellijk na de periode na zweven zonder spatie, en voeg toe de pixelwaarde van halve het afbeeldingsbestand de hoogte tussen het dashboard en de px. Bijvoorbeeld, als u de klasse "rollinover" genoemd, maar het beeld is 100 pixels hoog, uw code zou uitzien: a:hover.rollinover {achtergrond-positie: 0 - 50px;}.
Zoek in de code waar u uw afbeelding plaatsen.
Voeg de tekst van de code waar u uw afbeelding wilt weergeven. Toevoegen van de naam van de klasse die u hebt gedefinieerd in de CSS tussen de aanhalingstekens, en het woord "tekst" te vervangen door een korte beschrijving van de afbeelding (of de link zal worden gebruikt als, indien van toepassing).
Toevoegen van de code href = "" tussen de eerste aanhalingstekens en het afsluitende haakje van de opening een label, met de URL die u wilt dat de afbeelding te koppelen aan tussen de nieuwe set aanhalingstekens markeert, wordt de afbeelding als een link.
