Ändra bilder vid hover

Varför slita ditt hår med att skriva CSS eller inline-kod för att ändra utseende på bilder vid hover? Nu kan du få samma effekt genom att implementera endast några rader JavaScript. Ladda ner: Git Hub | ChangeImgOnHover

cat 1
Ändra mig!
cat 2
För musen över mig!
cat 3
Visst är vi söta?

Användningsinstruktioner

  1. Ladda ner och packa upp paketet från GitHub: ChangeImgOnHover.
  2. Klistra in kodraderna i slutet av html-dokumentet eller se till att DOM är helt laddat innan jQuery-koden exekveras. Du kan också tvinga webbläsaren att vänta till DOM är laddat genom att infoga denna kod: $(document).ready(function() { jQuery-plugin här });.
  3. Skapa en hover-variant för varje bild som du vill ha hover-effekt på. Lägg till filändelse _hover. Alla bilder måste ligga i samma mapp (se bild till höger).
  4. I HTML-koden måste alla bilder få klassnamn ”hover” för att det ska fungera.
  5. Lycka till!
Image directory
Alla bilder i samma mapp.

Html

<img src='img/cat1.jpg' class='hover' alt='cat 1' />
<img src='img/cat2.jpg' class='hover' alt='cat 2' />
<img src='img/cat3.jpg' class='hover' alt='cat 3' />

Script

01 (function($) {
02   $.fn.changeImgOnHover = function() {
03     $('.hover').each(function() {
04       var imgName = $(this).attr('src').slice(0,-4);
05       var extName = $(this).attr('src').split('.').pop();
06       var hoverImg = imgName + '_hover.' + extName;
07       var origImg = imgName + '.' + extName;
08       $(this).mouseover(function() {
09         $(this).attr('src', hoverImg);
10       });
11       $(this).mouseout(function() {
12         $(this).attr('src', origImg);
13       });
14     });
15   };
16 }) (jQuery);

Pluginen aktiveras med hjälp av en endaste kodrad i din kod, företrädesvis i botten av din html-kod, precis före </body>: $('.hover').changeImgOnHover();