How can I select an <img> element programmatically using JavaScript?

Question

I have an <img> in an HTML document that I would like to highlight as though the user had highlighted it using the mouse. Is there a way to do that using JavaScript?

I only need it to work in Mozilla, but any and all information is welcome.

EDIT: The reason I want to select the image is actually not so that it appears highlighted, but so that I can then copy the selected image to the clipboard using XPCOM. So the img actually has to be selected for this to work.

Answer 1

Here's an example which selects the first image on the page (which will be the Stack Overflow logo if you test it out on this page in Firebug):

var s = window.getSelection()
var r = document.createRange();
r.selectNode(document.images[0]);
s.addRange(r)

Relevant documentation:

• http://developer.mozilla.org/en/DOM/window.getSelection
• http://developer.mozilla.org/en/DOM/range.selectNode
• http://developer.mozilla.org/en/DOM/Selection/addRange

Answer 2

You might also want to call s.removeAllRanges() before s.addRange(r).