Category: DOM & JavaScript

Using JQuery and QTip to Make an Image Map with Tooltips

I’m trying to meet everyone at the office and thought about marking down in an office plan the people already met, what they do, etc. This turned out to be very easy to do with JQuery and QTip. Here’s how:

First of take the image you want to use and head down to this site to produce the image map automatically (that’s one handy tool I tell you):

http://www.maschek.hu/imagemap/imgmap

After that you can use the ‘alt’ attribute to put the tooltip text. The end result looks like this, some of the spaces are still empty so you’ll have to find the ones that aren’t :)

http://tech.morgadinho.org/cowork/

Enjoy!

Manage Multiple WordPress Installs

I was wondering how to admin several WordPress installs from the same interface and came out with this simple idea of having a tab container where each tab would give access to the WordPress admin panel.

This can be quite simple to develop by putting together a jQuery tab container and iframes.

This could be further extended in a way that one single login would authenticate across all the WordPress installations. In this way we can manage the several installs from one single interface with full flexibility, i.e. we have exactly the same options as if we open separate windows and log into the installations.

JavaScript Resources

Time to revisit JavaScript?

  • http://ejohn.org/apps/learn – Do you think you know JavaScript? Well, see if you understand these code challenges. This is a interactive tutorial, that walks you through different examples which you can even run on the same site.
  • http://jsbin.com – perfect to use in conjunction with the previous link. What you don’t understand just copy+paste here and try it out! This is a JavaScript playground so to say.
  • http://tinyurl.com/yqua25 – in this video Douglas Crockford from Yahoo! talks about “The JavaScript Programming Language”.

If you’re coming from Actionscript then this link is a good read as well.