Verklein de omvang van uw plaatjes en verbeter de laadtijd van uw pagina!

Lange laadtijden van webpagina's zorgen voor grote irritatie bij gebruikers. Wanneer u een klantvriendelijk systeem wilt opzetten is het dus belangrijk om lange laadtijden te voorkomen. Zorg er daarom voor dat uw webpagina bij voorkeur niet groter is dan 32k. Let in het bijzonder op het gebruik van plaatjes. Vaak kan zonder veel kwaliteitsverlies de bestandsgrootte van plaatjes aanzienlijk worden teruggebracht. Bij GIF Wizard kunt u uw GIF-bestanden laten testen. Vul onderstaand formulier in met uw URL. U krijgt een overzicht van alle afbeeldingen van de opgegeven pagina. Klik vervolgens op het gifwizard-pictogram naast uw afbeelding. U krijgt nu een refe pagina. Kies hier de optie "Log in as quest-user". De daaropvolgende pagina geeft uw afbeelding in verschillende ruimtebesparende versies. Hier kunt uw keuze uit maken. Klik de gewenste afbeelding aan met de rechtermuisknop en sla het bestand op. 

Voor gif's en JPG's  op een internetserver
Stap 1:  Voor GIFs bewaard bij een Internet WWW-server, gelieve de URL van de WWW-pagina of GIF in te tikken. 
URL: 
Stap 2: 
(optioneel)		 Kies de achtergrondkleur voor uw WWW-pagina. "ND" kleuren zijn niet gerasterd. 
red green blue
Gebruik automatisch de achtergrondkleuren van WWW-pagina´s.
Stap 3: 
(optioneel)		 Wijzig breedte en hoogte Scherpstellen 
Stap 4: 
(optioneel)

 
 
Voor gif's en JPG's  op de harde schijf
Stap 1: Voor afbeeldingen welke op de harde schijf van uw computer staan klikt u de Browse-button aan. 
Werkt met Netscape 2 & 3 en  MS Internet Explorer 3.02
Stap 2: 
(optioneel)		 Kies de achtergrondkleur voor uw WWW-pagina. "ND" kleuren zijn niet gerasterd. 
red green blue
Gebruik automatisch de achtergrondkleuren van WWW-pagina´s.
Stap 3: 
(optioneel)		 Wijzig breedte  en hoogte Scherpstellen 
Stap 4: 
(optioneel)

Ook met 'GIF Lube' kunt u de omvang van uw plaatjes verkleinen. De omvang van een plaatje wordt verkleint door het aantal kleuren te bepereken. Ook is het mogelijk om plaatjes van GIF formaat om te zetten naar JPG en andersom.

1   Geef hier de URL van uw plaatje:
URL:  

-- OF --

Geef hier een plaatje op van uw harde schijf
(Netscape 2.0+, IE3.0+ ).
FILE: 

2  Geef het gewenste resultaat op: (Optional)
Gelijk aan ingevoerde type
Laat JPEG zien
Laat GIF zien

3  doen

Een heel mooi programma om (animated)gifplaatjes kleiner te maken is Gif Animator. De naam zegt het al. Je kunt er niet alleen plaatjes mee kleiner maken, maar ook mooie animaties mee maken. Het downloadadres: Download pagina Gif Animator

Hoe zorg ik ervoor dat een plaatje veranderd als iemand er met zijn muis overheen beweegt?

Let op! Deze techniek werkt niet bij alle browsers. Iemand heeft minimaal Netscape 3.0 nodig of Internet Explorer 4.0.

Het veranderen van een plaatje is alleen mogelijk wanneer deze deel uit maakt van een link. Normaal ziet dit er ongeveer als volgt uit:

<A href=paginanaam.html>
<IMG src=oud.gif border=0>
</A>

Om duidelijk te kunnen maken welk plaatje op de pagina dient te veranderen moet u deze voorzien van een naam:

<A href=paginanaam.html>
<IMG src=oud.gif border=0 name=veranderPlaatje>
</A>

Voeg nu de volgende JavaScript code toe tussen <head> en </head> van uw pagina:

<SCRIPT language="javascript1.1">
oudPlaatje = new Image(68,24)
oudPlaatje.src = "oud.gif"
nieuwPlaatje = new Image(68,24)
nieuwPlaatje.src = "nieuw.gif"

function plaatjesVeranderen(cImg,ref) {
  document.images[cImg].src = ref.src
}
</SCRIPT>

Voeg dan een zogenaamde onMousOver event handler toe aan de link. Dit is JavaScript welke er voor zorgt dat de opdracht wordt uitgevoerd wanneer de muis over het oude plaatje gaat.:

<A href=paginanaam.html onMouseOver="plaatjesVeranderen('veranderPlaatje',nieuwPlaatje)">
<IMG src=oud.gif border=0 name=veranderPlaatje>
</A>

Wanneer je dat wil, dan kun je er voor zorgen dat het eerste plaatje weer verschijnt als de muis buiten het plaatje komt. Hiervoor moet je een 'onMousOut event handler' aan de link toevoegen:

<A href=paginanaam.html onMouseOver="plaatjesVeranderen('veranderPlaatje',nieuwPlaatje)" onMouseOut="plaatjesVeranderen('veranderPlaatje',oudPlaatje)">
<IMG src=oud.gif border=0 name=veranderPlaatje>
</A>

Meerdere plaatjes op een pagina.

  • zet ieder plaatje in een link en voorzie het van een unieke naam:

    <A href=paginanaam.html> <IMG src=plaatje.gif border=0 name=naamplaatje>
    </A>
    Zorg dat de plaatjes vooraf geladen worden. Maak daartoe een 'object' voor elk plaatje dat je wil laden door de volgende code toe te voegen aan het javascript in de head van je pagina.

    naamplaatje = new Image(width,height)
    naamplaatje.src = "plaatje2.gif"

    Om nu het plaatje te veranderen wanneer de muis er overheen rolt maken we de code compleet:
    <A href=paginanaam.html onMouseOver="plaatjesVeranderen('naamoudPlaatje',naamnieuwPlaatje)" onMouseOut="plaatjesVeranderen('naamnieuwPlaatje',naamoudPlaatje)">>
    <IMG src=plaatje.gif border=0 name=naamoudPlaatje>
    </A>

    naar Webdesign en HTML referentiegids

     

    Den Bosch Online

    Vraag en antwoord-forum:

    Vraag en antwoordforum over Webdesign, Javascript en HTML