Mouse-over effect toevoegen. Hoe kan je een afbeelding laten oplichten als de muis er over heen gaat?

Ik heb de 2 verschillende afbeeldingen al, wat is nu de html code om dit te laten werken?

Verwijderde gebruiker

13 jaar geleden

in: Programmeren

4.1K

4.1K keer bekeken

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Het beste antwoord

Dit kan vrij gemakkelijk met css (http://www.w3schools.com/css/default.asp).

Een voorbeeld:

Toegevoegd na 1 uur:
Het kan ook nog anders:

Gebruik deze zin:

Vervang afbeelding1 en afbeelding2 door je eigen afbeeldingen, en als je het direct kopieert van GoeieVraag, denk er dan aan dat GoeieVraag de enkele aanhalingstekens verandert, dus die moet je weer even terug veranderen.

(Lees meer...)

Verwijderde gebruiker

13 jaar geleden

Andere antwoorden (1)

Je kunt dit doen met javascript.
In de zet je dit:

En in de (op de plaats waar de afbeelding komt) dit:

Wel even opletten dat je naar de juiste directory van de images verwijst.

Toegevoegd na 1 minuut:
O ja, en natuurlijk ook de juiste width en height invullen

Toegevoegd na 2 uur:
Ik heb nog even verder gezocht, omdat ik wíst dat het in css eenvoudiger kan (met minder images) en ik kom op de zgn. "image sprites". Op deze pagina lees je hoe het wordt toegepast:
http://www.w3schools.com/css/css_image_sprites.asp

Succes!

(Lees meer...)

Bronnen:

http://www.w3schools.com/css/css_image_sprites.asp

Verwijderde gebruiker

13 jaar geleden

Verwijderde gebruiker

13 jaar geleden

Volgens mij kan het ook niet met html, daarom gaf ik het javascript. Het moet mogelijk zijn in css, al ben ik nog niet overtuigd van de oplossing die Ivar91 hieronder geeft.

Verwijderde gebruiker

13 jaar geleden

Dit lijkt mij een script afkomstig uit Dreamweaver, een nogal omslachtig gedoe (zoals wel vaker met dit pakket).
Dat kan qua Javascript wel wat simpeler gecodeerd...., dat preloaden heeft ook niet zoveel nut (meer). Bovendien voldoet vaak het volgende ook al als het alleen maar om "highlighting" gaat, bijv. bij een button:
onMouseOver="this.style.backgroundColor=''kleur2"; onMouseOut="this.style.backgroundColor="kleur1"

Verwijderde gebruiker

13 jaar geleden

Gaat iets fout met quotes, komt omdat GV dat automatisch aanpast (geldt ook voor script in antwoord). dan maar zo:
onMouseOver="this.style.backgroundColor=`kleur2`"
waar bij ` een normale single quote moet zijn.

Verwijderde gebruiker

13 jaar geleden

Ja ik snapte het al. Het javascript komt idd uit Dreamweaver, en omslachtig of niet: ik vind het handig dat het erin zit.

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000