7

我有<img>一个 HTML 文档，我想突出显示它，就好像用户使用鼠标突出显示它一样。有没有办法使用 JavaScript 做到这一点？

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

编辑：我想选择图像的原因实际上不是让它看起来突出显示，而是这样我就可以使用 XPCOM 将所选图像复制到剪贴板。所以实际上必须选择 img 才能工作。

4

7 回答 7

12

这是一个选择页面上第一张图片的示例（如果您在 Firebug 的此页面上对其进行测试，它将是 Stack Overflow 徽标）：

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

相关文件：

于 2008-09-24T01:42:34.067 回答
1

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

于 2009-10-09T19:41:10.933 回答
0

你到底想做什么？如果您使用的是 XPCOM，那么您可能正在编写一个应用程序或一个扩展程序；你不能直接获取图像数据并把它放在剪贴板上吗？

于 2008-09-24T01:42:51.540 回答
0

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

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

$("img#YOURIMAGEHER​​E").focus();

于 2008-09-24T01:46:28.253 回答
-1

您可以交换图像的来源，如 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>
于 2008-09-24T01:21:42.243 回答
-1

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

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

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

于 2008-09-24T01:39:12.140 回答
-2

给 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()" />

编辑:: 你可以尝试 .focus 给它焦点。

于 2008-09-24T01:30:42.550 回答