Afbeelding rollovers zijn waardevolle instrumenten bij het helpen van uw eindgebruikers volgen hun muis over je webpagina . Een website-ontwerper zal vaak pack een veel gedetailleerde informatie in een pagina , en de eindgebruiker zal een visuele wachtrij dat haar muis heeft rolde something.There zijn twee fundamentele manieren om een rollover te maken nodig . U kunt de client - side scripting taal genaamd JavaScript gebruiken om de taak te volbrengen , of u kunt Cascading Style Sheets ( CSS ) gebruiken om de taak te volbrengen . Dit artikel heeft betrekking op de Cascading Style Sheets methode . Het creëren van de Tekst Rollover
Maak een generiek XHTML-document in uw tekstverwerker zoals te zien in de afbeelding . *
Voeg de DOCTYPE Transitional en de codering tags. * Neem de titel tags tussen de hoofd -tags * Neem de stijl -tags tussen de hoofd -tags
tussen de body-tags , typt u de volgende woorden : . . .
p Dit is een tekst rollover
Sluit deze zin met de overspanning begin en eind tags , zoals afgebeeld . Binnen in het begin tag span , type: . Class
= " rollover "
uw document uploaden naar uw webserver
maken de stylesheet Regels
< br > Typ het volgende tussen de stijl van labels aan de bovenkant van het document : span.rollover
{ background-color : white ; } overspanning : hover.rollover { background-color : yellow ; kleur : kastanjebruin ; }
maak eerst de overspanning rollover instructie voor de style sheet . Type " overspanning ", dan een periode , dan " rollover ", waar rollover overeenkomt attribuut de klasse die werd gegeven aan de tag span . Daarin staat dat de achtergrond tussen de overspanning tags is wit , die eruit ziet als een lege achtergrond kleur aan de eindgebruiker .
Vervolgens maakt de spanwijdte , plus een dubbele punt , plus een periode , plus rollover , dat is de klasse van de tag span . De hover instructie betekent " Wanneer u uw muis over de tekst binnen de tijdsspanne tag , volgt u deze instructies . " Wanneer de eindgebruiker plaatsen met de muis over de tekst , de achtergrond wordt geel en de tekst verandert kastanjebruin .
Het creëren van een Button Rollover
Er is een relatief eenvoudige manier om een leuk uitziende knop uit de tekst op uw webpagina te maken . Voeg gewoon de volgende attributen om de span.rollover instructie : background-color
: marine ; border : 5px wit begin ; font-family : Georgia ; font-size : 14pt ; color: white ;
Ten eerste , de achtergrondkleur veranderen van wit naar marine . Voeg vervolgens de grens instructie , waarvan drie delen heeft : de grens - breedte , de grens - kleur en de grens - stijlkenmerken . We hebben gekozen voor een 5 - pixel , wit , meet grens , wat betekent dat er een witte , rechthoekige doos grenzend aan de inhoud van de tag span dat is 5 pixels dik .
Verander het lettertype naar Georgië op 14 pt . Tot slot , van kleur veranderen van het lettertype te wit , dus het verschijnt tegen de marine achtergrond . Het document uploaden naar uw webserver en test het uit .
Voordat de Rollover
p Dit is een momentopname van de webpagina voordat u uw muisaanwijzer over de tekst . De tekst is wit , en de achtergrond is marineblauw .
Na de Rollover
p Dit is een momentopname van de webpagina , terwijl de muisaanwijzer zich boven de knop . De achtergrond is geel , en de tekst is kastanjebruin .
|
