Как я могу программно выбрать элемент <img> с помощью JavaScript?
У меня есть <img> в HTML-документе, который я хотел бы выделить, как если бы пользователь выделил его с помощью мыши. Есть ли способ сделать это с помощью JavaScript?
Мне он нужен только для работы в Mozilla, но любая информация приветствуется.
Обновлено: Причина, по которой я хочу выбрать изображение, на самом деле не в том, чтобы оно выглядело выделенным, а в том, чтобы я мог затем скопировать выбранное изображение в буфер обмена с помощью XPCOM. Так что, чтобы это работало, на самом деле нужно выбрать img.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Вы можете поменять местами источник изображения, как в 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>
Дайте тегу 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()" />
Обновлено:: Вы можете попробовать .focus, чтобы сфокусировать его.
Основная идея решения "highLight" хороша, но вы, вероятно, захотите установить "статический" стиль границы (определенный в css) для img с теми же размерами, что и размер, указанный в методе highLight, поэтому он не вызвать изменение размера.
Кроме того, я считаю, что если вы измените вызов на «highLight (this)», а функцию def на «highLight (obj)», то вы можете пропустить вызов «document.getElementById ()» (и спецификацию атрибут "id" для "img"), если вместо этого вы используете "obj.style.border".
Вероятно, вам также нужно правильно написать «highLight».
Вот пример, который выбирает первое изображение на странице (которое будет логотипом Stack Overflow, если вы протестируете его на этой странице в Firebug):
var s = window.getSelection()
var r = document.createRange();
r.selectNode(document.images[0]);
s.addRange(r)
Соответствующая документация:
- http://developer.mozilla.org/en/DOM/window.getSelection
- http://developer.mozilla.org/en/DOM/range.selectNode
- http://developer.mozilla.org/en/DOM/Selection/addRange
Идеальный. Это именно то, что я ищу.
Что делать s.addRange(r)? Я тут боролся: stackoverflow.com/questions/42298386/…
Что именно ты пытаешься сделать? Если вы используете XPCOM, вы, вероятно, пишете приложение или расширение для него; нельзя просто получить данные изображения и напрямую поместить их в буфер обмена?
Я пытаюсь скопировать изображение в буфер обмена, но это на удивление сложно сделать из XUL / JS / XPCOM. Пожалуйста, смотрите stackoverflow.com/questions/68103/…, если знаете как!
Мой личный выбор для выбора элементов - это jquery:
Затем, чтобы получить элемент по вашему выбору:
$ ("img # ВАШЕ ИЗОБРАЖЕНИЕ"). focus ();
Вы также можете вызвать s.removeAllRanges () перед s.addRange (r).
Спасибо, Майк. Я должен был быть более конкретным в том, что я собирался делать. Изображение не может просто выделиться. Это действительно должно быть выделено.