Question

我在HTML文档中有一个<img>我想要突出显示，就像用户使用鼠标突出显示它一样。有没有办法使用JavaScript？

我只需要它在Mozilla中工作，但欢迎任何和所有信息。

编辑：我想选择图像的原因实际上并非如此突出显示，但我可以使用XPCOM将所选图像复制到剪贴板。因此，实际上必须选择img才能使其正常工作。

Answer 1

这是一个选择页面上第一个图像的示例（如果您在Firebug中的此页面上测试它将是Stack Overflow徽标）：

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

相关文件：

Answer 2

您可能还想在s.addRange（r）之前调用s.removeAllRanges（）。

Answer 3

你究竟想做什么？如果您正在使用XPCOM，那么您可能正在编写一个应用程序或扩展程序;你不能直接获取图像数据并将其放在剪贴板上吗？

Answer 4

我个人选择元素的选择是jquery：

然后获得您选择的元素是：

$（ “IMG＃YOURIMAGEHERE”）聚焦（）;

Answer 5

您可以交换图像的来源，例如img.src =“otherimage.png”;

我实际上是在某一点上做过这一点，你可以做一些事情来预加载图像。

我甚至在图像元素上设置了特殊属性，例如swap-image =“otherimage.png”，然后搜索任何带有它的元素，并设置处理程序以自动交换图像...你可以做一些有趣的东西。

抱歉，我误解了这个问题！但无论如何，对于那些有兴趣做我正在谈论的人，这里有一个我的意思的例子（粗略的实现，我建议使用像jQuery这样的框架来改进它，但只是为了让你前进）：

<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>

Answer 6

“highLight”解决方案的基本思路是可以的，但你可能想为img设置一个“静态”边框样式（在css中定义），其尺寸与highLight方法中指定的相同，所以它不会导致调整大小。

另外，我相信如果你将调用更改为“highLight（this）”，并且函数def更改为“highLight（obj）”，那么你可以跳过“document.getElementById（）”调用（和“img”的“id”属性的规范，只要你改为“obj.style.border”。

您可能还需要正确拼写“highLight”。

Answer 7

为img标记提供ID。使用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 :: 你可以尝试.focus来集中注意力。

如何使用JavaScript以编程方式选择<img/>元素？

7 个答案: