Question

Can a bookmarklet be used to overlay an image on a web page? Not as a pop-up, but as a image positioned by CSS and with a high z-index to display on top of other elements. And without a mask i.e., Shadowbox or similar jQuery effect. Just an image from a URL and positioned in the bottom left hand corner of the browser window.

This is what I have so far, but it may be the wrong direction to be going:

javascript:(function(){document.write("<style type='text/css'>body {background-image:url(http://example.com/image.png); position: absolute; left:50px; top:300px; z-index:9999;}</style>");})()

I have a JS function that works as a bookmarklet to change the case of text on the page, and now I’d like to be able to show an image when the bookmarklet is used.

Answer 1

Setting a background image for the body won’t help if you want the image to overlay the page. Also, document.write can’t be used directly to add CSS styles.

What you probably want to do is add a new img element to the page, and give it absolute or fixed positioning, along with a high z-index.

Here’s an example that adds the SO logo to the corner of the window, using fixed positioning:

javascript:(function(){document.body.innerHTML += '<img src="http://sstatic.net/so/img/logo.png" style="position: fixed; left: 10px; bottom: 10px; z-index: 1000">';})();