[JS] Ramdom image met link

Status
Niet open voor verdere reacties.

Icemar

Steunend lid
Vip Lid
Met dit script kan je bv je header laten veranderen per venster wat geladen wordt.
Om zo je site extra aandacht te laten beleven voor de bezoeker.

HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<!--
/**
 * What: Ramdon images 
 * for PC TUTS 
 * @Auhor: Butterflyice
 * Date : 14-01-2012
 */
-->
<head>
<title>Random image met link</title> 
    <script type="text/javascript">
        window.onload = randomImage;
        /* Hier de afbeeldingen plaatsen*/
        var adImages = new Array(
            "plaatje1.jpg",
            "plaatje2.jpg",
            "plaatje3.jpg",
            "plaatje4.jpg"
        );

        /* Hier de linken toevoegen */
        var adLink = new Array(
            "http://www.google.nl",
            "http://www.pctuts.be/",
            "http://www.nu.nl",
            "http://www.geemstijl.nl"
        )

        /*Hier de alt en title tekst*/
        var alttext = new Array(
            "Google",
            "Pctuts",
            "Nu",
            "Geen Stijl"
        )

        /* Van dit gedeelte afblijven */
        var thisAd = 0;

        /*  Laden van de afbeelding in de overige elmenten vullen */
        function randomImage() {
            thisAd = Math.floor((Math.random() * adImages.length));
            document.getElementById("image").src = adImages[thisAd];
            document.getElementById("image").alt = alttext[thisAd];
            document.getElementById("image").title = alttext[thisAd];
            document.getElementById("link").href= adLink[thisAd];

            rotate();
        }
    /*Tot hier afblijven  */
    </script>
</head>

<body>
  <!-- De link en de afbeelding tonen  -->
  <div>
    <a href="" id="link"><img id="image" src="" alt="" title=""/></a>
 </div>
</body>
</html>

Mochten er vragen over zijn dan kan je deze stellen op het forum.
 
Ik wil hier iets aan toevoegen.

Om het overzichtelijk te houden is het verstandig om afbeeldingen in een eigen map te zetten.
Maak daarom zoals in mijn voorbeeld de map images aan.

image.jpg

En verander het stukje code op regel 17 t/m 20 naar

HTML:
            "images/plaatje1.jpg",
            "images/plaatje2.jpg",
            "images/plaatje3.jpg",
            "images/plaatje4.jpg"
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan