jQuery rollovers


/ Published in: JavaScript
Save to your folder(s)

jQuery script for navigation image rollovers


Copy this code and paste it in your HTML
  1. $(document).ready(function() {
  2. // Preload all rollovers
  3. $("#tabs img").each(function() {
  4. // Set the original src
  5. rollsrc = $(this).attr("src");
  6. rollON = rollsrc.replace(/.jpg$/ig,"2.jpg");
  7. $("<img>").attr("src", rollON);
  8. });
  9.  
  10. // Navigation rollovers
  11. $("#tabs a").mouseover(function(){
  12. imgsrc = $(this).children("img").attr("src");
  13. matches = imgsrc.match(/2/);
  14.  
  15. // don't do the rollover if state is already ON
  16. if (!matches) {
  17. imgsrcON = imgsrc.replace(/.jpg$/ig,"2.jpg"); // strip off extension
  18. $(this).children("img").attr("src", imgsrcON);
  19. }
  20.  
  21. });
  22. $("#tabs a").mouseout(function(){
  23. $(this).children("img").attr("src", imgsrc);
  24. });
  25. });

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.