Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webprogrammeren & scripting

Javascript slideshow probleempje

Dupke
6 antwoorden
  • Heb onderstaand script in een pagina die er voor zorgt dat vier afbeeldingen op volgorde worden afgebeeld. De afbeeldingen zijn links en dat werkt ook prima…

    Nu wil ik onder de afbeelding een korte tekst afbeelden (zie Array Text).
    Maar dit moet natuurlijk de juiste tekst bij het juiste plaatje zijn.

    Kom er niet helemaal uit… Graag jullie hulp!

    Bedankt, Dupke


    [code:1:81b38c1da9]

    <script language="JavaScript">
    var imgs = new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")
    var lnks = new Array("link1.html","link2.html","link3.html","link4.html")
    var alt = new Array("Click!","Click!","Click!","Click!")
    var text = new Array("Tekst1","Tekst2","Tekst3","Tekst4")
    var currentAd = 3
    var imgCt = 4
    function cycle() {
    currentAd++
    if (currentAd == imgCt) {
    currentAd = 0
    }
    document.adpic.src=imgs[currentAd]
    document.adpic.alt=alt[currentAd]
    adLink.href=lnks[currentAd]
    setTimeout("cycle()",5000)
    }
    </script>

    <a href="link1.html" name="adLink" target="_blank"><img src="pic1.jpg" name="adpic" border="0"></a>

    <script language="JavaScript">
    cycle()
    </script>

    [/code:1:81b38c1da9]
  • [code:1:07ac10adc3]

    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <STYLE TYPE="text/css">
    <!–

    .testclass {border-width: 2px;
    border-style: solid;
    border-color: #000000;
    font: 12px arial,helvetica;
    background: #ffffff;
    z-index: 10;
    layer-background-color: #ffffff;
    }

    #test {position: absolute;
    top: 400px;
    left: 80%;
    width: 15%;
    padding: 0px;
    }
    –>
    </STYLE>
    </head>
    <body bgcolor="#FFFFFF" text="#000000">

    <a href="link1.html" name="adLink" target="_blank"><img src="pic1.jpg" name="adpic" border="0"></a>
    <DIV CLASS="testclass" ID="test">Testlayer</DIV>

    <script language="JavaScript">
    function writit(text,id)
    {
    if (document.getElementById)
    {
    x = document.getElementById(id);
    x.innerHTML = '';
    x.innerHTML = text;
    }
    else if (document.all)
    {
    x = document.all[id];
    x.innerHTML = text;
    }
    else if (document.layers)
    {
    x = document.layers[id];
    text2 = '<P CLASS="testclass">' + text + '</P>';
    x.document.open();
    x.document.write(text2);
    x.document.close();
    }
    }

    var imgs = new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")
    var lnks = new Array("link1.html","link2.html","link3.html","link4.html")
    var alt = new Array("Click!","Click!","Click!","Click!")
    var text = new Array("Tekst1","Tekst2","Tekst3","Tekst4")
    var currentAd = 3
    var imgCt = 4
    function cycle() {
    currentAd++
    if (currentAd == imgCt) {
    currentAd = 0
    }
    document.adpic.src=imgs[currentAd]
    document.adpic.alt=alt[currentAd]
    adLink.href=lnks[currentAd]
    writit(text[currentAd],'test');
    setTimeout("cycle()",1000)
    }
    </script>

    <script language="JavaScript">
    cycle()
    </script>
    </body>
    </html>
    [/code:1:07ac10adc3]

    :D
  • Bedankt voor de reactie en inderdaad het werkt perfect, maar ik zit nog met een klein probleempje…

    De tekst zou ik graag direct onder het plaatje willen hebben (pixels instellen okay), maar niet elke afbeelding is even breed en hoog. Is het niet simpel mogelijk met een document.write commando… Krijg het zelf met de variabel niet voor elkaar.

    De slideshow maakt onderdeel uit van een pagina welke opgebouwd is uit tabellen. De hoogte en plaats van het plaatje is dus variabel, dus ik kan de tekst niet zomaar ergens neerzetten zoals in je voorbeeld.

    Is er een andere oplossing?
  • Er is een betere oplossing: werk met een DB en een server-side script/programmeer-taal.

    Daarnaast: tabellen zijn niet voor visuele weergave bedoelt. Daarvoor is CSS.
  • ik weet niet of het browser ompatible is :

    [code:1:1747938702]
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

    </head>
    <body bgcolor="#FFFFFF" text="#000000">

    <a href="link1.html" name="adLink" target="_blank"><img src="pic1.jpg" name="adpic" border="0"></a><br>
    <div CLASS="testclass" ID="test" style="position:absolute; width:200px; height:115px; z-index:1">Testlayer</div>

    <script language="JavaScript">
    function writit(text,id)
    {
    if (document.getElementById)
    {
    x = document.getElementById(id);
    x.innerHTML = '';
    x.innerHTML = text;
    }
    else if (document.all)
    {
    x = document.all[id];
    x.innerHTML = text;
    }
    else if (document.layers)
    {
    x = document.layers[id];
    text2 = '<P CLASS="testclass">' + text + '</P>';
    x.document.open();
    x.document.write(text2);
    x.document.close();
    }
    }

    var imgs = new Array("pic1.jpg","pic2.jpg","pic3.jpg","pic4.jpg")
    var lnks = new Array("link1.html","link2.html","link3.html","link4.html")
    var alt = new Array("Click!","Click!","Click!","Click!")
    var text = new Array("Tekst1","Tekst2","Tekst3","Tekst4")
    var currentAd = 3
    var imgCt = 4
    function cycle() {
    currentAd++
    if (currentAd == imgCt) {
    currentAd = 0
    }
    document.adpic.src=imgs[currentAd]
    document.adpic.alt=alt[currentAd]
    adLink.href=lnks[currentAd]
    writit(text[currentAd],'test');
    setTimeout("cycle()",1000)
    }
    </script>

    <script language="JavaScript">
    cycle()
    </script>
    </body>
    </html>
    [/code:1:1747938702]
  • Het eerste probleem is dat het niet compatible is met browsers die geen JavaScript ondersteunen >> Google.

    Eigenlijk moet je de HTML code al in je document hebben staan, maar voor de mensen die JavaScript aan hebben staan maak je er iets speciaals van en ga je met die elementen 'goochelen'. Op die manier kan iedereen op de links klikken/volgen en is het 'leuker' voor mensen die JavaScript aan hebben.

    Dat zijn m.i. de belangrijkste dingen als je JavaScript gaat gebruiken. Is het nog toegankelijk (grootste browser waarvoor je toegankelijk moet zijn, zijn zoekmachines).

    Geld ook voor popups e.d. Niet <a href="javascript:p('p.html');"/>, maar <a href="p.html" onclick="p(this.href);return false;"/>

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.