Slimme rollover's

Auteur: Hans - 21 augustus 2004 - 15:48 - Gekeurd door: Dennisvb - Hits: 7576 - Aantal punten: 4.17 (6 stemmen)

Met een rollover kan je een figuur doen veranderen wanner je met de muiscursor over een afbeedling beweegt.

Het nadeel van rollover's in javascript is dat er een merkbare vertraging is zodra je met je cursor voor de eerste keer over de afbeedling beweegt. De afbeelding die als rollover moet verschijnen moet namelijk nog ingeladen worden.

Een betere oplossing hiervoor zou zijn om de te verschijnen afbeelding al in te laden, zodat hij onmiddelijk kan verschijnen wanneer je met de cursor over de afbeelding beweegt.

Dit script kan je makkelijk toepassen wanneer je een menubalk hebt die uit plaatjes bestaat.

OPMERKING: Als je erg veel plaatjes gaat preloaden, dan gaat ook het inladen van je pagina vertragen.

Code:

Dit zet je in je HEAD:

php code - Bekijk de code zonder highlighting - Klap code in

                <script language="javascript" type="text/javascript">
<!-- Script afkomstig van Sitemasters.be
/*wil je extra figuren toevoegen, voeg dan nieuwe regels toe volgens hetzelfde schema*/
    var normaal = new Image;
    var over = new Image;

    normaal.src = "normaal.gif";
    over.src = "over.gif";
// einde script -->
</script>

            
<script language="javascript" type="text/javascript">
<!-- Script afkomstig van Sitemasters.be
/*wil je extra figuren toevoegen, voeg dan nieuwe regels toe volgens hetzelfde schema*/
    var normaal = new Image;
    var over = new Image;
 
    normaal.src = "normaal.gif";
    over.src = "over.gif";
// einde script -->
</script>
 

Dit moet tussen je BODY tags:

php code - Bekijk de code zonder highlighting - Klap code in

                <img src="normaal.gif" onMouseOver="this.src=over.src" onMouseOut="this.src=normaal.src">
            
<img src="normaal.gif" onMouseOver="this.src=over.src" onMouseOut="this.src=normaal.src">

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (2)