Ondersteuning » Plugin vragen » Mouse over image – Plugin

  • Hallo

    Voor de website die ik aan het bouwen ben ben ik op zoek naar een simpele plugin om een image mouse over te creëren. Gewoon alleen verandering van de afbeelding als je met je muis over de foto gaat.

    Iemand een zinnige tip? Zoek me echt suf online.

    Zou eventueel cool zijn als hij compatible is met wp bakkery, maar geen must!

    Groetjes
    Iris

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Hoi Iris,

    Als de mouse over overal dezelfde afbeelding mag zijn is dat te doen met CSS.

    Kun je dat eerst even doorgeven?

    Guido

    Thread starter nikki

    (@eigenste-ik)

    Het gaat erom dat als je met je muis over een afbeelding gaat dat er dan een andere afbeelding voor in de plaats komt en deze dus ook weer weg gaat als je je muis eraf haalt.

    Hoi,

    Dat begrijp ik, maar mag dat 1 dezelfde afbeelding zijn (voor de hele site), of wil je dat per afbeelding kunnen instellen?

    Guido

    Hoi opnieuw,

    Als je het voor elke afbeelding afzonderlijk wilt instellen zou deze plugin geschikt zijn. Maar hij werkt op dit moment niet meer goed omdat hij zwaar verouderd is. Ik kan hem met enkele kleine wijzigingen wel weer werkend maken.

    Tot op heden heb ik in ieder geval niets beters gevonden..

    Guido

    Zoiets kun je inderdaad relatief simpel met css. Ik heb een snel voorbeeldje gemaakt, is dit wat je bedoelt?

    https://jsfiddle.net/ruurd/c0of23cc/3/

    Thread starter nikki

    (@eigenste-ik)

    RAW html in wp bakery werkt ook!
    Fijn!

    Hallo,

    Voorbeeld van Ruurd werkt idd prima.
    Blijkbaar red je het zo (met CSS) en dus ga ik me verder niet verdiepen in het fixen van die plugin.

    Mvg, Guido

    Thread starter nikki

    (@eigenste-ik)

    Oooh sorry jongens ik was te snel!
    Heb nu in WP Bakery een RAW html ingevoerd met een codering

    —————–

    Codering staat: http://www.desperado-tattoo.com/htmlvraag.html

    —————–

    Ik heb meerdere afbeeldingen en heb ik dus ook de codes aangepast met de juiste afbeeldingslocaties, pagina’s en mouse over tekstje. Alleen laat hij overal dezelfde afbeelding combi zien.

    Ik heb in 1 scherm 5 posities gemaakt, 1 rij van 3 en 1 rij van 2. Met daarin dus ook de volgende 2 codes:

    —————–

    Codering staat: http://www.desperado-tattoo.com/htmlvraag.html

    —————–

    Codering staat: http://www.desperado-tattoo.com/htmlvraag.html

    —————–

    Wat doe ik fout? Wat zie ik over het hoofd?

    @guido: Werkende plugin zou heel cool zijn! Ook handig als er een keer iets vervangen moet worden en bv niet door mij.

    • Deze reactie is gewijzigd 4 jaren, 11 maanden geleden door nikki.

    Hoi,

    Ik begrijp niet goed wat je wilt met die code… is dat de HTML van meerdere pagina’s van je website?

    Ik zal komend weekend even met die mouseover plugin aan de slag gaan. Is makkelijk weer werkend te maken en zal jou veel gedoe schelen.

    Het enige wat je dan moet doen is CSS class mouseover aan je afbeeldingslink meegeven en een nieuwe URL van de mouseover afbeelding via data-oversrc. Voorbeeld:

    
    <img class="mouseover wp-image-9 size-full" src="domein/wp-content/uploads/2017/09/slide1.jpg" alt="" width="1200" height="480" data-oversrc="domein/wp-content/uploads/2018/02/slide2.jpg" />
    

    Hou je op de hoogte.

    Guido

    Thread starter nikki

    (@eigenste-ik)

    Hallo Guido

    Dat is lief!!
    Heb het nu opgelost met een html codering, maar plugin zou zo veel fijner en makkelijker zijn voor de toekomst. Dus ik hou me aanbevolen!

    Super benieuwd!

    Groetjes
    Iris

    Hoi Iris,

    Hij werkt weer als je de wijzigingen doorvoert die in dit topic staan:
    https://wordpress.org/support/topic/make-img-mouseover-work-again/

    Gaat dat je lukken?

    En dan dit dus toevoegen in de URL van je afbeelding:
    class="mouseover" data-oversrc="URL van mouseover afbeelding"

    Guido

11 reacties aan het bekijken - 1 tot 11 (van in totaal 11)
  • Het onderwerp ‘Mouse over image – Plugin’ is gesloten voor nieuwe reacties.