Simon Willison’s Weblog

Image Drag bookmarklet

I got a good response to yesterday’s call for help on finding an HTML element’s co-ordinates on a page. I ended up using PPK’s findPos functions which seemed to do the trick just fine.

Here’s the result:

Image Drag (bookmarklet, drag on to your links bar).

Image Drag makes every image on a page “draggable”, using youngpup’s DOM-Drag library. It works by “cloning” each image on the page and making the clone an absolutely positioned, draggable element then changing the original image to a transparent pixel of the correct width and height. I wrote it because I wanted my girlfriend to be able to play with GothMaker in Phoenix instead of IE, but it works for other pages too. There is a weird bug which affects any pages that use absolute positioning (such as this one)—I think it’s a bug in DOM-Drag rather than a problem with findPos but I’m not entirely sure what’s causing it.

The bookmarklet works fine in Phoenix (on both Linux and Windows) but doesn’t work in IE. I’m not too bothered about this—with IE6 nearing it’s second birthday if you are still using it you should seriously considering upgrading to something a bit more up to date anyway.

Since most of the sites linked to from this one use absolute positioning, here are a few which the bookmarklet works well on that are fun to mess around with:

• Slashdot
• Red Hat
• Cool-2B-Real (yay beef).

Incidentally, although it’s only meant as a fun distraction, having played with it a bit it looks like it could be quite useful as a tool for web site design tweaks such as seeing if the page would look better with images moved around a bit.

Update: It turns out the bookmarklet only works for pages that aren’t being served with an XHTML doctype. Curious.