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's laten verschijnen bij klik

Anoniem
None
8 antwoorden
  • Hallo,

    D.m.v dit topic was ik op het idee gekomen om foto's ook zo te laten zien. Maar nu wil ik niet dat de foto verandert bij een mouseover, maar bij een onclick. Dus het effect van de hover wil ik met een klik bereiken.
    Hoe kan ik dat doen. Waarschijnlijk met een simpel javascriptje, maar ik kan geen javascript.

    Zelf dacht ik aan de hover te vervangen door een class, en dan dmv get.elementbyid (oid) bij een onclick de class er aan hangen. Maar ik weet niet of ik in de goede richting zit.

    (Let OP!, dit is geen script request)
  • ben je er niet door de [code:1:2a883faa8d]#container a.gallery:hover[/code:1:2a883faa8d]te vervangen door [code:1:2a883faa8d]
    #container a.gallery:active[/code:1:2a883faa8d] ?
  • @neuf: ik vermoed dat dat niet de oplossing is (iig niet crossbrowser). Na een click zal de pagina herladen en is de link niet meer 'active' (in theorie zal het zo moeten werken).

    @cor0612: het leuke aan het voorbeeld wat je laat zien, is dat het een pure css oplossing is. Als de oplossing van neuf niet (goed) werkt, dan moet je idd aan de slag met javascript.
    Je kan, bij een click, de classname van de link aanpassen (en de overige links moet je resetten). Ik heb het even snel uitgewerkt en met wat kleine aanpassingen op het origineel werkt het ook (5 minuutjes prutsen).

    Aangezien je geen scriptrequest wil doen, zal ik je ook niet meteen mijn oplossing geven ;) Misschien wil je eerst zelf een poging wagen.

    Maar als je er niet uitkomt, dan hoor ik het wel.
  • @neuf: Dan moet je je muisknop ingedrukt houden.

    Ik heb nu [code:1:ed8582d190]onclick="this.className='hover'"[/code:1:ed8582d190] toegevoegd aan de link en in m'n css :hover aangepast in .hover.
    2 proplemen:
    - bij het gaan naar de volgende afbeelding moet de vorige gereset worden.
    - De css opmaak doet het niet meer, waarchijnlijk doordat de class verandert. Hoe maak je een tweede class met javascript? dus 2 classes aan 1 link?

    (Zie ook online voorbeeld: klikje)
  • Je moet de class toevoegen aan het object, dus:
    [code:1:c2855a1394]object.className += ' hover'; [/code:1:c2855a1394]
    Voor het resetten van de andere objecten moet je alle objecten in een lus langslopen en de className weer terugzetten in de oorspronkelijk stand. Bijv.
    [code:1:c2855a1394]object.className = 'bla di bla'; [/code:1:c2855a1394]
    Ik heb het in mijn eigen probeersel opgelost door de toegevoegde term te replacen met een lege string.
  • Ik kom er niet uit, waarschijnlijk omdat ik geen js kan. Misschien snap ik het als ik je probeersel zie?
  • Ik heb alle :hover gewijzigd in .clicked.
    [code:1:d75ef10bb5]
    #container a.gallery.clicked {border:1px solid #fff;}
    …enz.
    [/code:1:d75ef10bb5]
    Vervolgens een javascript functie toegevoegd voor het afhandelen van de clicks.
    [code:1:d75ef10bb5]
    <script type="text/javascript">
    function show(o)
    {
    var imganchors = o.parentNode.parentNode.getElementsByTagName("a")
    , i = imganchors.length
    , re = /\sclicked/gi;

    while (i–)
    imganchors[i].className = imganchors[i].className.replace(re, '');

    o.className += ' clicked';
    }
    </script>
    [/code:1:d75ef10bb5]
    En aan alle hrefs heb ik dezelfde onclick toegevoegd
    [code:1:d75ef10bb5]
    <li><a onclick="show(this); return false;" class="gallery slidea" href="#nogo"> …
    …enz.
    [/code:1:d75ef10bb5]
    De rest van de code uit het voorbeeld is hetzelfde gebleven.
  • Ah, op die fiets, bedankt, het werkt!

Beantwoord deze vraag

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