views:

1945

answers:

7

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.

A: 

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>
Mike Stone
Thanks, Mike. I should have been more specific about what I was looking to do. The image can't just appear highlighted. It has to actually be highlighted.
Joel Anair
Nah, not your fault, I misread some words... sorry!
Mike Stone
A: 

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.

Greg Ogle
A: 

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.

David M. Karr
+7  A: 

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:

insin
Perfect. That's exactly what I'm looking for.
Joel Anair
A: 

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?

Eevee
I'm trying to copy an image to the clipboard, but it's surprisingly hard to do from XUL/JS/XPCOM. Please see http://stackoverflow.com/questions/68103/how-do-i-copy-image-data-to-the-clipboard-in-my-xul-application if you know how!
Joel Anair
A: 

My personal choice for selecting elements is jquery:

Then to get the element of your choice is:

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

KevDog
A: 

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

Neil