Ga naar inhoud

Hoe wissenlende achtergrondfoto laden

parkerler

Door parkerler
in Archief Website Hulp & Scripts

 Delen

Aanbevolen berichten

  • 2 weken later...
  • 3 weken later...
leroy Mentor

leroy

Geplaatst:
Geplaatst:

Hier heb ik al eens een topic over gezien en op geantwoord met een oplossing die ongeveer gelijk is aan deze.

Maar hier alsnog de broncode van het bestandje wat ik toen ook heb geplaatst.

Hetgeen wat dit script doet is plaatjes uit een lijst (array) halen en om de 3 seconden een nieuwe plaatje neerzetten.

Hier de broncode:

<html>
<head>
<script language="javascript">
var timeout = '3000';
var plaatje=new Array();
plaatje[0]="http://www.dag.nl/wp-content/uploads/2009/01/dreamstime-sex-iq-test.jpg";
plaatje[1]="http://www.orthoptie.be/Images/Logmar%20crowded%20test%20klein.jpg";

var linkje=new Array();
linkje[0]="http://www.mijndomein.nl";
linkje[1]="http://www.jouwdomein.be";

function new_image(hrefid){
    var rand_no = Math.floor(plaatje.length*Math.random());
    document.getElementById(hrefid).src = plaatje[rand_no];
    document.getElementById(hrefid).href = linkje[rand_no];
    setTimeout('new_image()', timeout); 
}
window.onload=function(){
    new_image('reclamelinkje');
}
</script>
</head>
<body>
<a href="#" id="reclamelinkje"><img src="#" id="reclameplaatje"></a>
</body>
</html>

Het is ook mogelijk om het plaatje te kiezen wanneer de pagina wordt ververst. Dan moet de regel: "setTimeout('new_image()', timeout);" verwijderd worden.

Dit script is eigenlijk meer om een plaatje (banner) te laten vervangen en ook de link als je op het plaatje klikt. Maar dit is ook weer eenvoudig aan te passen

Je moet dan de <body> tag een id meegeven bijvoorbeeld: '<body id="testid">'

Vervolgens staat er in het script ergens: 'new_image('reclamelinkje');'.

de tekst 'reclamelinkje' moet dan veranderd worden naar het ID van de body tag.

Vervolgens moet je het script aanpassen. Maar ik zal hier de aangepaste versie neerzetten. (hetgeen wat tussen de <head> en </head> tags staat)

<script language="javascript">
var timeout = '3000';
var plaatje=new Array();
plaatje[0]="http://www.dag.nl/wp-content/uploads/2009/01/dreamstime-sex-iq-test.jpg";
plaatje[1]="http://www.orthoptie.be/Images/Logmar%20crowded%20test%20klein.jpg";


function new_image(hrefid){
    var rand_no = Math.floor(plaatje.length*Math.random());
    document.getElementById(hrefid).background = "url(" +plaatje[rand_no]+ ")";
    setTimeout('new_image()', timeout); 
}
window.onload=function(){
    new_image('testid');
}
</script>

Dit zou als het goed is de achtergrond van de <body> om de 3 seconden moeten vervangen door één van de plaatjes in de array.

Dit is niet getest, dus het zou wel eens kunnen dat het niet werkt. In dat geval ga ik zelf even kijken waar het aan zou kunnen liggen.

bovenin het script staat: "var timeout = '3000';" Dit is hoeveel tijd in miliseconden er tussen mag zitten wanneer een plaatje vervangen moet worden

Ik hoop dat je er wat mee kan, en dat het werkt.

Groeten,

Leroy

Link naar reactie
Delen op andere sites
 Delen
Ga naar topic overzicht
Logo

OVER ONS

PC Helpforum helpt GRATIS computergebruikers sinds juli 2006. Ons team geeft via het forum professioneel antwoord op uw vragen en probeert uw pc problemen zo snel mogelijk op te lossen. Word lid vandaag, plaats je vraag online en het PC Helpforum-team helpt u graag verder!

SITEMAP

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.