Can I call a Javascript bookmarklet over just an image in browser window. e.g.:blah.com/blah.jpg?

Question

If I'm at a url... say http://i.imgur.com/JcxmE.jpg where it is just the image file, how can I make a window/div appear over the image when the bookmarklet is called? Instapaper does this. So far my bookmarklet loads an external javascript file, which in turn creates a div and appends it to the body. This doesn't work when it is just an image. Ideas? Thank you!

Answer 1

Well it doesn't look like you can, at least not in Firefox. Even something as simple as javascript:alert('Hello World'); doesn't work on an image. Try that code for yourself.

Answer 2

Alright it looks like firefox still renders a DOM even over images. The hello world example works only if you stick it inside a bookmarklet, but not straight in the url bar.

Here's an example that should work as long as your browser renders a DOM even on pure image urls. It will insert the image inside a container element.

javascript:(function(){
  var doc = document,
      image = doc.getElementsByTagName('img')[0],
      container = doc.createElement('div');

  doc.body.removeChild(image);
  container.appendChild(image);
  doc.body.appendChild(container);
})();