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.