Endre bildekilden ved rollover ved hjelp av jQuery
Jeg har noen bilder og deres rollover-bilder. Ved hjelp av jQuery vil jeg vise / skjule rollover-bildet når onmousemove / onmouseout-hendelsen skjer. Alle bilde navnene mine følger samme mønster, som dette:
Original Image:
Image.gif
Rollover Image:
Imageover.gif
Jeg vil sette inn og fjerne "over"-delen av bildekilden i henholdsvis onmouseover- og onmouseout-hendelsen.
Hvordan kan jeg gjøre det ved hjelp av jQuery?
442
3
For å sette opp på klar:
For de som bruker url-bildekilder:
Jeg vet at du spør om å bruke jQuery, men du kan oppnå samme effekt i nettlesere som har JavaScript slått av ved hjelp av CSS:
Det finnes en lengre beskrivelse her.
Enda bedre, imidlertid, er å bruke sprites: simple-css-image-rollover
Det kan være lurt å endre bildeklassen fra første linje. Hvis du trenger flere bildeklasser (eller en annen bane), kan du bruke
og så videre.
Det skal fungere, jeg har ikke testet det :)