Моя DOM выглядит так:
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
Когда кто - то нажимает на изображение, я хочу СРК изображения на изменение в <img src="imgx_off.gif">
котором x
представляет собой изображение номер 1 или 2.
Это возможно, или я должен использовать CSS, чтобы изменить изображения?
javascript
jquery
image
user67033
источник
источник
19th July, 2016 15:39 PM
Е. Количество ответов на вопрос 369 и @jonstjohn Количество ответов на вопрос 931 . Но такая неудача, @OP не вошел в систему послеFeb 17 '09 at 2:57
.:(
И, @jonstjohn Отвечать Остаться неотмеченным .Ответы:
Вы можете использовать функцию attr () в jQuery . Например, если ваш
img
тег имеетid
атрибут «my_image», вы должны сделать это:Затем вы можете изменить
src
изображение с помощью jQuery следующим образом:Чтобы прикрепить это к
click
событию, вы можете написать:Чтобы повернуть изображение, вы можете сделать это:
источник
Одна из распространенных ошибок, которые люди совершают, когда смена источника изображения не ждет загрузки изображения, чтобы выполнить последующие действия, такие как изменение размера изображения и т. Д. Вам нужно будет использовать
.load()
метод jQuery, чтобы делать вещи после загрузки изображения.Причина редактирования: https://stackoverflow.com/a/670433/561545
источник
За дополнительной информацией. Я пытаюсь установить атрибут src с помощью метода attr в jquery для изображения объявления, используя синтаксис, например:
$("#myid").attr('src', '/images/sample.gif');
Это решение полезно, и оно работает, но если изменить путь, измените также путь к изображению и не работайте.
Я искал решение этой проблемы, но ничего не нашел.
Решение состоит в том, чтобы поставить '\' в начале пути:
$("#myid").attr('src', '\images/sample.gif');
Этот трюк очень полезен для меня, и я надеюсь, что он полезен для других.
источник
ЕСЛИ есть не только jQuery или другие среды для уничтожения ресурсов - каждый по одному килобайту для загрузки каждый раз по одному килобайту просто для простого трюка - но и нативный JavaScript (!):
Это можно записать в общем и более элегантно:
источник
Я покажу вам, как изменить изображение
src
, чтобы при нажатии на изображение оно вращалось по всем изображениям в вашем HTML (в частности, в вашемd1
идентификаторе иc1
классе) ... независимо от того, есть ли у вас 2 или более изображений в вашем HTML ,Я также покажу вам, как очистить страницу после того, как документ будет готов, чтобы изначально отображалось только одно изображение.
Полный код
Поломка
Создайте копию ссылок, содержащих изображения (примечание: вы также можете использовать атрибут href ссылок для дополнительной функциональности ... например, отобразить рабочую ссылку под каждым изображением ):
Проверьте, сколько изображений было в HTML, и создайте переменную, чтобы отслеживать, какое изображение отображается:
Измените HTML документа, чтобы отображалось только первое изображение. Удалите все остальные изображения.
Привязать функцию для обработки при нажатии на ссылку изображения.
Сердце приведенного выше кода используется
++$imgShow % $length
для циклического перемещения по объекту jQuery, содержащему изображения.++$imgShow % $length
сначала увеличивает наш счетчик на единицу, затем он изменяет это число на количество изображений. Это будет держать результирующий индекс циклически от0
доlength-1
, которые являются индексами$images
объекта. Это означает, что этот код будет работать с 2, 3, 5, 10 или 100 изображениями ... циклически просматривая каждое изображение по порядку и перезапуская первое изображение, когда будет получено последнее изображение.Кроме того,
.attr()
используется для получения и установки атрибута "src" изображений. Чтобы выбрать элементы среди$images
объекта, я установил$images
в качестве контекста jQuery форму$(selector, context)
. Затем я использую,.eq()
чтобы выбрать только элемент с конкретным индексом, который меня интересует.Пример jsFiddle с 3 изображениями
Вы также можете хранить
src
s в массиве.Пример jsFiddle с 3 изображениями
А вот как включить hrefs из тегов привязки вокруг изображений:
пример jsFiddle
источник
Надеюсь, что это может работать
источник
Вы должны добавить атрибут id в тег изображения, например:
тогда вы можете использовать этот код для изменения источника изображений:
источник
Вы также можете сделать это с помощью jQuery следующим образом:
Вы можете иметь условие, если есть несколько состояний для источника изображения.
источник
У меня была такая же проблема при попытке вызвать кнопку повторного ввода кода. После некоторого поиска, теперь приведенная ниже функция прекрасно работает практически во всех известных браузерах (chrome, Firefox, IE, Edge, ...):
«theUrl» используется для рендеринга нового изображения капчи и может быть проигнорировано в вашем случае. Наиболее важным моментом является создание нового URL, который заставляет FF и IE перерисовывать изображение.
источник
Изменить источник изображения с помощью jQuery
click()
элемент:
код:
источник
источник
У меня сегодня такое же чудо, которое я сделал на этом пути:
источник
Это гарантированный способ сделать это в Vanilla (или просто Pure) JavaScript:
источник
Просто дополнение, чтобы сделать его еще более крошечным:
источник
Нет способа изменить источник изображения с помощью CSS.
Единственно возможный способ - использовать Javascript или любую библиотеку Javascript, такую как jQuery .
логическая единица
Изображения находятся внутри div и отсутствуют
class
илиid
с этим изображением.Таким образом, логика будет выбирать элементы внутри,
div
где расположены изображения.Затем выберите все элементы изображений с помощью цикла и измените изображение с помощью Javascript / jQuery .
Пример кода с демонстрационным выходом
источник