Как я могу выбрать элемент <img>программно, используя JavaScript? - PullRequest
Новая
       18

Как я могу выбрать элемент <img>программно, используя JavaScript?

7 голосов
/ 24 сентября 2008

У меня есть <img> в HTML-документе, который я хотел бы выделить, как если бы пользователь выделил его с помощью мыши. Есть ли способ сделать это с помощью JavaScript?

Мне это нужно только для работы в Mozilla, но любая информация приветствуется.

РЕДАКТИРОВАТЬ: причина, по которой я хочу выбрать изображение, на самом деле не в том, чтобы оно выглядело выделенным, а в том, чтобы я мог затем скопировать выбранное изображение в буфер обмена с помощью XPCOM. Таким образом, img на самом деле должен быть выбран, чтобы это работало.

Ответы [ 7 ]

12 голосов
/ 24 сентября 2008

Вот пример, который выбирает первое изображение на странице (это будет логотип переполнения стека, если вы протестируете его на этой странице в Firebug): 

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

Соответствующая документация:

1 голос
/ 09 октября 2009

Вы также можете вызвать s.removeAllRanges () перед s.addRange (r).

0 голосов
/ 24 сентября 2008

Мой личный выбор для выбора элементов: jquery:

Затем получить элемент по вашему выбору:

$ ( "# IMG YOURIMAGEHERE") фокус ();.

0 голосов
/ 24 сентября 2008

Что именно вы пытаетесь сделать? Если вы используете XPCOM, вы, вероятно, пишете приложение или расширение для него; Вы не можете просто получить данные изображения и поместить их в буфер обмена напрямую?

0 голосов
/ 24 сентября 2008

Основная идея решения «highLight» в порядке, но вы, вероятно, захотите установить «статический» стиль границы (определенный в css) для img с теми же размерами, которые указаны в методе highLight, поэтому не вызывает изменения размера.

Кроме того, я считаю, что если вы измените вызов на «highLight (this)», а функцию def на «highLight (obj)», то вы можете пропустить вызов «document.getElementById ()» (и спецификация атрибута "id" для "img"), если вместо этого вы используете "obj.style.border".

Возможно, вам также нужно правильно написать "highLight".

0 голосов
/ 24 сентября 2008

Дайте тегу img идентификатор. Используйте 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, чтобы придать этому фокус.

0 голосов
/ 24 сентября 2008

Вы можете поменять местами источник изображения, как в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...