Ga naar inhoud

Javascript slideshow probleempje


anoniem

Aanbevolen berichten

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]
Link naar reactie
[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
Link naar reactie
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?
Link naar reactie
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]
Link naar reactie
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;"/>
Link naar reactie

Om een reactie te plaatsen, moet je eerst inloggen

Gast
Reageer op dit topic

×   Geplakt als verrijkte tekst.   Herstel opmaak

  Er zijn maximaal 75 emoji toegestaan.

×   Je link werd automatisch ingevoegd.   Tonen als normale link

×   Je vorige inhoud werd hersteld.   Leeg de tekstverwerker

×   Je kunt afbeeldingen niet direct plakken. Upload of voeg afbeeldingen vanaf een URL in

×
×
  • Nieuwe aanmaken...