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.
More recent articles
- ChatGPT should include inline tips - 30th May 2023
- Lawyer cites fake cases invented by ChatGPT, judge is not amused - 27th May 2023
- llm, ttok and strip-tags - CLI tools for working with ChatGPT and other LLMs - 18th May 2023
- Delimiters won't save you from prompt injection - 11th May 2023
- Weeknotes: sqlite-utils 3.31, download-esm, Python in a sandbox - 10th May 2023
- Leaked Google document: "We Have No Moat, And Neither Does OpenAI" - 4th May 2023
- Midjourney 5.1 - 4th May 2023
- Prompt injection explained, with video, slides, and a transcript - 2nd May 2023
- download-esm: a tool for downloading ECMAScript modules - 2nd May 2023
- Let's be bear or bunny - 1st May 2023