Vraag & Antwoord

Webprogrammeren & scripting

foto javascript met dubbele functie

2 antwoorden
  • Ik ben op zoek naar een manier om foto's in 1 tabel of verschillende manieren te vertonen. Een manier moet zijn om op een thumb te klikken die vervolgens vergoot wordt. De andere manier zou met pijltjes links en rechts van de grote foto moeten zijn waarmee je naar de volgende of vorige foto kunt gaan. Afzonderlijk heb ik javascripts die doen wat ik wil maar de combinatie van de 2 is waarnaar ik op zoek ben. Ik hoop dat ik me duidelijk heb uitgelegd, maar voor alle zekerheid een voorbeeld van de effecten die ik graag gecombineerd wil hebben. http://www.webdisenjo.nl/test/pics.html Bedankt!
  • Probeer deze code eens: [code:1:aff5300e33] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="UTF-8"> <head> <title>Webdisenjo</title> <link rel="stylesheet" href="css/mooiedingen.css"> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin browserName = navigator.appName; browserVer = parseInt(navigator.appVersion); ns3up = (browserName == "Netscape" && browserVer >= 3); ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4); function doPic(imgName) { if (ns3up || ie4up) { imgOn = ("" + imgName); document.mainpic.src = imgOn; } } // End --> </script> <script language="JavaScript1.1"> var photos=new Array() var which=0 /*Change the below variables to reference your own images. You may have as many images in the slider as you wish*/ photos[0]="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap1.jpg" photos[1]="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap2.jpg" photos[2]="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap3.jpg" photos[3]="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap4.jpg" function backward(){ if (which>0){ window.status='' which-- document.images.mainpic.src=photos[which]}} function forward(){ if (which<photos.length-1){ which++ document.images.mainpic.src=photos[which]} else window.status='End of gallery'} </script> </head> <body> <!--wijzig hier de namen en de afmetingen--> <div align="center"> <table width=210 border=0 cellspacing=0 cellpadding=0> <h1>Voorbeeld 1</h1> <tr> <td><a href="javascript:doPic('http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap1.jpg');"><img src="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap1.jpg" width=60 height=50 border=0></a></td> <td><a href="javascript:doPic('http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap2.jpg');"><img src="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap2.jpg" width=60 height=50 border=0></a></td> <td><a href="javascript:doPic('http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap3.jpg');"><img src="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap3.jpg" width=60 height=50 border=0></a></td> <td><a href="javascript:doPic('http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap4.jpg');"><img src="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap4.jpg" width=60 height=50 border=0></a></td> </tr> <tr></tr> <tr> <td colspan=4><img name="mainpic" src="http://www.webdisenjo.nl/test/pics/thumbs/mooie-dingen-trap1.jpg" width=250 height=167 border=0></td> </tr> <tr> <td colspan=4> <form method="POST" name="rotater"> <input type="button" style="border: solid #F5C47F; border-width: 2px; background:#E55F40;" value="<<Back" name="B2" onClick="backward()"> <input type="button" style="border: solid #F5C47F; border-width: 2px; background:#E55F40;" value="Next>>" name="B1" onClick="forward()"><br> </form> </td> </tr> </tr> </table> </div> </body> </html> [/code:1:aff5300e33] Wat ik gedaan heb: Bij de regel: document.images.photoslider.src=photos[which]}} photoslider veranderd in mainpic Zo heet het plaatje namelijk, zie de regel: <img name="mainpic" etc...

Beantwoord deze vraag

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

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