CODEWITHSUNDEEP
javascripthtmlfirefoxdom
Joel Anair
Joel Anair

Reputation: 13962

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

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.

Upvotes: 7

Views: 9615

Answers (7)

Neil
Neil

Reputation: 55402

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

Upvotes: 1

KevDog
KevDog

Reputation: 5803

My personal choice for selecting elements is jquery:

Then to get the element of your choice is:

$("img#YOURIMAGEHERE").focus();

Upvotes: 0

Eevee
Eevee

Reputation: 48546

What, exactly, are you trying to do? If you're using XPCOM, you're presumably writing an application or an extension for one; can't you just get the image data and put it on the clipboard directly?

Upvotes: 0

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

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:

Upvotes: 11

David M. Karr
David M. Karr

Reputation: 15225

The basic idea of the "highLight" solution is ok, but you probably want to set a "static" border style (defined in css) for the img with the same dimensions as the one specified in the highLight method, so it doesn't cause a resize.

In addition, I believe that if you change the call to "highLight(this)", and the function def to "highLight(obj)", then you can skip the "document.getElementById()" call (and the specification of the "id" attribute for "img"), as long as you do "obj.style.border" instead.

You probably also need to spell "highLight" correctly.

Upvotes: -1

Mike Stone
Mike Stone

Reputation: 44613

You can swap the source of the image, as in img.src = "otherimage.png";

I actually did this at one point, and there are things you can do to pre-load the images.

I even set up special attributes on the image elements such as swap-image="otherimage.png", then searched for any elements that had it, and set up handlers to automatically swap the images... you can do some fun stuff.

Sorry I misunderstood the question! but anyways, for those of you interested in doing what I am talking about, here is an example of what I mean (crude implementation, I would suggest using frameworks like jQuery to improve it, but just something to get you going):

<html>
<body>
<script language="javascript">
function swap(name) {
  document.getElementById("image").src = name;
}
</script>
<img id="image" src="test1.png"
     onmouseover="javascript:swap('test0.png');"
     onmouseout="javascript:swap('test1.png');">
</body>
</html>

Upvotes: -1

oglester
oglester

Reputation: 6655

Give the img tag an ID. Use document.getElementById('id'). 

<script type="text/javascript" language="javascript">
function highLight()
{
  var img = document.getElementById('myImage');
  img.style.border = "inset 2px black";
}
</script>
<img src="whatever.gif" id="myImage" onclick="hightLight()" />

EDIT:: You might try .focus to give it focus.

Upvotes: -2

Related Questions