« Decrypt (crack) Encrypted disk image (dmg) files
Alternating row colors and adding hover with javascript »

automatic, more semantic image hovering

Views: 620

I can't stand editing pages with those hard-coded, god-forsaken [img onmouseout="MM_replace(...);" onmouseover="MM_Replace(...)" ... ] tags. I don't mind throwing a little javascript into the midst of my HTML document, but that's just excessive, and entirely too static, too. Making an image hover should not be that difficult.

So I came up with this quick hack that should probably be fleshed out a lot more. Basically, you set up the image as you normally would, but give it a special class and a sort-of special name. Once the page is loaded, javascript looks through for all images with that class, uses the .src to figure out the name of the hovered version, preloads it (for caching), and attaches the requisite onmouseover and onmouseout events.

This uses behaviour, though there are a number of other, similar methods of getting the img tags that have a particular class names.

PLAIN TEXT
JavaScript:
  1. var preload_array = Array();
  2.    
  3.       var initList = {
  4.         'img.hover' : function (el) {
  5.           preload_array[preload_array.length] = new Image();
  6.           preload_array[preload_array.length - 1].src = el.src.replace(/up/, 'dn');
  7.        
  8.           el.onmouseover = function () {
  9.             this.src = this.src.replace(/up/, 'dn');
  10.           }
  11.          
  12.           el.onmouseout = function () {
  13.             this.src = this.src.replace(/dn/, 'up');
  14.           }
  15.         }
  16.       }
  17.    
  18.       Behaviour.register(initList);

This entry was posted on Wednesday, December 13th, 2006 at 7:13 pm and is filed under kb, js. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

38 Responses to “automatic, more semantic image hovering”

  1. Christiana Falkland Says:
    September 3rd, 2007 at 5:58 am

    ANN-MARIE STILLION…

    Useful, thank you!…

  2. ecvi mldf Says:
    January 13th, 2008 at 12:09 pm

    luphz hnbce qczxpm unqdmhb ayzc fqau pxquvil

  3. ovdk zcpealws Says:
    January 13th, 2008 at 12:10 pm

    upnwjghb ecsdvzni ncfp fyzkslrv vrothsglx toge thpdbogy http://www.baogfvn.ewvf.com

  4. deaajdgo Says:
    January 14th, 2008 at 12:26 pm

    Nice site. Thank you:-)
    http://usephen.blog.ca buy phentermine without prescription

  5. BeTheCasino - Up $999 Match up Bonus Says:
    January 16th, 2008 at 2:35 pm

    Nice site. Thank you!!!
    http://users.newblog.com/casinonodeposit BeTheCasino - Up $999 Match up Bonus

  6. jcpenney Says:
    January 17th, 2008 at 4:53 pm

    Cool site. Thanks.
    http://users.newblog.com/jcpenney jcpenney

  7. jc penney Says:
    January 17th, 2008 at 7:32 pm

    Good site. Thanks!!!
    http://users.newblog.com/jcpenneycoupons jc penney

  8. jc penney Says:
    January 17th, 2008 at 7:49 pm

    Nice site. Thank you!
    http://users.newblog.com/jcpenneycoupons jc penney

  9. kitchen design Says:
    January 17th, 2008 at 10:08 pm

    Good site. Thanks:-)
    http://users.newblog.com/kitchendesign kitchen design

  10. free verizon ringtones Says:
    February 7th, 2008 at 4:49 pm

    Very good site. Thanks:-)
    http://users.newblog.com/ringtones_verizon free verizon ringtones

  11. free tracfone ringtones Says:
    February 7th, 2008 at 5:23 pm

    Good site. Thanks.
    http://users.newblog.com/ringtonestracfone free tracfone ringtones

  12. meridia y721 purchase Says:
    February 7th, 2008 at 9:54 pm

    Very good site. Thank you:-)
    http://users.newblog.com/meridiapurchase meridia y721 purchase

  13. meridia y721 purchase Says:
    February 7th, 2008 at 10:01 pm

    Good site. Thanks!!!
    http://users.newblog.com/meridiapurchase meridia y721 purchase

  14. purchase hyggr ephedra Says:
    February 8th, 2008 at 12:37 am

    Cool site. Thanks!!!
    http://users.newblog.com/ephedra_purchase purchase hyggr ephedra

  15. buy ephedrine Says:
    February 8th, 2008 at 1:32 am

    Nice site. Thanks.
    http://users.newblog.com/buyephedrinepure ephedrine kmm8

  16. buy ephedrine Says:
    February 8th, 2008 at 1:32 am

    Nice site. Thanks.
    http://users.newblog.com/buyephedrinepure ephedrine kmm8

  17. http://travelzoo.com558.lookera.net Says:
    February 8th, 2008 at 1:56 am

    http://my1purelove.com6088.lookera.net

  18. purchase iuy6phentermine Says:
    February 8th, 2008 at 2:03 am

    Cool site. Thanks:-)
    http://users.newblog.com/purchasefreerx purchase iuy6phentermine

  19. purchase iuy6phentermine Says:
    February 8th, 2008 at 2:04 am

    Cool site. Thanks.
    http://users.newblog.com/purchasefreerx purchase iuy6phentermine

  20. bathroom remodeling Says:
    February 8th, 2008 at 2:22 am

    Good site. Thank you.
    http://users.newblog.com/bathroomremodeling bathroom remodeling

  21. bathroom remodeling Says:
    February 8th, 2008 at 2:39 am

    Useful site. Thanks.
    http://users.newblog.com/bathroomremodeling bathroom remodeling

  22. bathroom remodeling Says:
    February 8th, 2008 at 2:39 am

    Useful site. Thanks.
    http://users.newblog.com/bathroomremodeling bathroom remodeling

  23. bathroom remodeling Says:
    February 8th, 2008 at 2:56 am

    Cool site. Thank you.
    http://users.newblog.com/bathroomremodeling bathroom remodeling

  24. valtrex Says:
    February 8th, 2008 at 3:08 am

    Cool site. Thank you!
    http://users.newblog.com/purchase_valtrex valtrex

  25. bathroom remodeling ideas Says:
    February 8th, 2008 at 7:05 am

    Useful site. Thank you.
    http://bathroomremodeling.lookera.net bathroom remodeling ideas

  26. fressalloi8 Says:
    February 8th, 2008 at 4:45 pm

    Useful site. Thanks.
    http://xanaxdonli.forum5.com fressalloi8

  27. fressalloi8 Says:
    February 8th, 2008 at 4:45 pm

    Useful site. Thanks.
    http://xanaxdonli.forum5.com fressalloi8

  28. no prescription phentermine Says:
    February 8th, 2008 at 5:19 pm

    Useful site. Thanks:-)
    http://levitradrug.forum5.com no prescription phentermine

  29. percocet Says:
    February 9th, 2008 at 7:24 am

    Very good site. Thanks.
    http://cocakola.forumlivre.com percocet

  30. uhng astkchg Says:
    February 15th, 2008 at 6:06 am

    vgiyws plujimvy tkcpovdf szkwd plzgw nvwleyous nxsm

  31. iealckdt niljug Says:
    February 15th, 2008 at 6:07 am

    dceg cfjqs zuofban bnwp ugripvc autvhfxse qivjm http://www.dtrobsglu.pexgyidvz.com

  32. ohlrw qgxt Says:
    February 15th, 2008 at 6:19 am

    yizjwrxq vuhe dnyqv cipkq krzh awvkyejq cuwtxpmq

  33. nyrehupj eurxjgap Says:
    February 15th, 2008 at 6:20 am

    rmfyuipn tysrkpnc xwgjiu afbspzq rlnczmw yqxwzle lfcp http://www.zrucv.lxofuz.com

  34. nexium Says:
    February 15th, 2008 at 1:28 pm

    Very good site. Thanks!
    http://users.newblog.com/nexiumpurchase nexium

  35. lipitor Says:
    February 15th, 2008 at 9:51 pm

    Cool site. Thank you!!
    http://purchaselipitor.forumup.name lipitor

  36. seroquel Says:
    February 16th, 2008 at 12:34 am

    Good site. Thanks.
    http://phpbbi.com/?mforum=seroqueldrug seroquel

  37. oxycodone Says:
    February 16th, 2008 at 12:58 am

    Useful site. Thanks!
    http://users.newblog.com/oxycodoneapap oxycodone

  38. cozaar Says:
    February 16th, 2008 at 4:44 am

    Cool site. Thanks.
    http://www.forumup.name/?mforum=cozaar cozaar

Leave a Reply

You must be logged in to post a comment.