davidosomething.com

blog

post

jQuery Wunderkind plugin

Mar 3, 2011 0

  • share this page

    • share this article:

So I’m officially a jQuery plugin author now. I wrote a plugin, jQuery Wunderkind that can create a CSS imagemap for you with hover effects (the special thing is the hover effect). There’s lots of room for improvement, but there aren’t many imagemap plugins to choose from so it’s worth something I’m sure.

I made this plugin as a challenge to myself, after working on a client website that has a similar feature (see the larger flash module on thetruth.com). With this plugin it’s easy to recreate the entire flash module without flash.

Get the plugin and more details here:
jQuery Wunderkind

For support and comments, use the comments form below.

  • http://dasministerium.com David Wosnitza

    erm… demo’s not working :(

    Safari 5.0.3, Mac OS 10.6

    jquery.wunderkind.min.js:10 SyntaxError: Parse error
    http://wunderkind.hokuten.net/:190 TypeError: Result of expression ‘$(‘#insert-here’).wunderkind’ [undefined] is not a function.

    • http://card.davidosomething.com/ davidosomething

      Fixed! something about “for each” loops on webkit browsers

  • David Wosnitza

    u sure? different machine, same config, same errors :(

  • http://card.davidosomething.com/ davidosomething

    try it now, one more change — quoted ‘class’ key in dom where elements created

  • David Wosnitza

    yeah! that did the trick!

    nice plugin :)
    have you considered using SVG masks to smoothen the hover area?

  • http://card.davidosomething.com/ davidosomething

    Probably in the future. I’m planning to read coords from the
    imagemap tag for the next release, so for polygons and circles I’ll definitely need a canvas.

  • http:/www.surfulater.com Image hotspot highlighting

    Probably a dumb question but how are the cats themselves being highlighted in hover. I can’t see any code that i doing this.

    Neat jQuery plugin btw.

    - Neville

  • http://card.davidosomething.com/ davidosomething

    the “image” key in the hotspot array of objects specifies the On state for the area being highlighted. this is the value for the orange cat, for instance: http://wunderkind.hokuten.net/images/tabby_on.jpg