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

foto javascript met dubbele functie

rutger1973
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

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