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

Webdesign (HTML, CSS, Flash)

Foto's wijzigen zonder de pagina te herladen

Markievh
7 antwoorden
  • Hoi allemaal,

    Ik zou graag op een bepaalde pagina foto's laten wijzigen wanneer iemand op de nummers 1,2,3,4,5 die bij een foto staan klikt.

    Dan moet er een andere foto ingeladen worden, maar de rest van de pagina moet blijven staan.
    Het gaat om de onderstaande code


    [code:1:621c091f1b] <div id="bannerCntr">

    <img src="images/img1.png" alt="" />

    <ul>
    <li class="selected"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    </ul>

    </div>
    [/code:1:621c091f1b]

    Ik wil dus het zo maken, dat wanneer iemand op nummer 2 klikt, images/img2.png wordt geladen.

    Hoe kan ik dit het beste maken?

    Alvast bedankt.

    Ik hoor het graag.

    Groeten,
    Mark
  • Dat kan met javascript.

    [code:1:8663d28489]<img id="afbeelding" src="image1.jpg" alt="" />
    <a href="#" onClick="document.getElementById('afbeelding').src='image2.jpg'">2</a>
    [/code:1:8663d28489]
  • http://www.huddletogether.com/projects/lightbox2/
  • Dat is niet helemaal de bedoeling.

    Die 5 cijfers rechtsonder in de header, moeten klikbaar worden door bovengenoemd script, waarna bij elke klik op een getal nieuwe foto's inladen.
  • Heb je het geprobeert de code die ik hierboven schreef?
  • Die code snap ik niet helemaal, eerlijk gezegd.

    Zou je het eens met drie afbeeldingen kunnen uitwerken?
  • Met die code kun je zoveel afbeeldingen tonen als je wilt.

    De eerste regel vertelt waar het plaatje moet komen. In jou voorbeeld de foto bovenin. Met id geeft je een img-tag een naam bv [i:b8f0da5fb8]afbeelding[/i:b8f0da5fb8].
    [code:1:b8f0da5fb8]<img id="afbeelding" src="image1.jpg" alt="" />[/code:1:b8f0da5fb8]
    Daarna maak je een link maar in plaats van de doellocatie bij href in te vullen bepaal je met onClick wat er moet gebeuren als iemand op de link klikt. Met een stuk javascript vertel je de browser dat het plaatje met het id [i:b8f0da5fb8]afbeelding[/i:b8f0da5fb8] vervangen moet worden door image2.jpg, image3.jpg, enz.
    [code:1:b8f0da5fb8]
    <a href="#" onClick="document.getElementById('afbeelding').src='image2.jpg'">2</a>
    <a href="#" onClick="document.getElementById('afbeelding').src='image3.jpg'">3</a>
    <a href="#" onClick="document.getElementById('afbeelding').src='image4.jpg'">4</a> [/code:1:b8f0da5fb8]

Beantwoord deze vraag

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