Geek Answers Handbook

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 if the user had selected it with the mouse. Is there a way to do this using JavaScript?

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

EDIT: The reason I want to select an image is not really so that it was selected, but so that I could then copy the selected image to the clipboard using XPCOM. Therefore, to do this, select img.

+7
javascript dom html firefox
source share
7 answers

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

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

Relevant documentation:

+12
source share

You can also call s.removeAllRanges () before s.addRange (r).

+1
source share

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

0
source share

My personal choice for selecting items is jQuery:

Then, to get the item of your choice:

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

0
source share

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

I really did it at some point, and there are things you can do to preload the images.

I even set up special attributes for image elements such as swap-image = "otherimage.png", then looked for any elements that he had, and set up handlers to automatically replace images ... you can make some funny stuff.

Sorry, I misunderstood the question! but anyway, for those of you who are interested in doing what I'm talking about, here is an example of what I mean (rough implementation, I would suggest using frameworks like jQuery to improve it but just something to get you started):

 <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>
-one
source share

The main idea of ​​the "highLight" solution is fine, but you probably want to set the "static" border style (defined in css) for 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 def function to "highLight (obj)", then you can skip the call to "document.getElementById ()" (and the specification for the attribute "id" for "img") if you use "obj.style.border".

You may also need to correctly call "highLight."

-one
source share

Give the img ID tag. 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 can try. Focus to give it focus.

-2
source share

More articles:


All Articles