46 801
Вопрос: Возможно ли поменять у рисунка src, используя только jQuery?
Ниже представлен HTML код, следующего вида:
|
1 2 3 4 5 6 7 |
<div id="d1"> <div class="c1"> <a href="#"><img src="img1_on.gif"></a> <a href="#"><img src="img2_on.gif"></a> </div> </div> |
Когда кто-нибудь кликает на изображение, я хочу, чтобы источник изображения менялся, например, с 1 на 2.
Если это возможно, то что нужно прописать в JS и CSS коде?
Ответ: Да. Используя jQuery
Вы можете использовать функцию jQuery attr(). На пример, если тэг img имеет атрибут id равный 'my_image':
|
1 |
<img id="my_image" src="first.jpg"/> |
Далее, вы можете изменить src с помощью jQuery, следующим образом:
|
1 |
$("#my_image").attr("src","second.jpg"); |
Чтобы приделать этот код на событие нажатия кнопки мыши, мы должны написать:
|
1 2 3 |
$("#my_image").bind("click", function() { $("#my_image").attr("src","second.jpg"); }); |
Чтобы менять изображение, вы должны написать следующее:
|
1 2 3 4 5 6 |
$("img").bind("click", function() { var src = ($(this).attr("src") === "img1_on.jpg") ? "img2_on.jpg" : "img1_on.jpg"; $(this).attr("src", src); }); |
А что мешает просто использовать JS и организовать предварительную загрузку картинок в массив и последующее использование? Примерно так, как делает это в навигационной панели мастер в Macromedia Dreamweaver?
Мне кажется мешает сама суть вопроса, в котором автор вполне конкретно уточнил, можно ли поменять атрибут SRC используя JQuery. Если бы автор спросил, «можно ли заменить одну картинку другой» или как-то так, то, думаю Ваш вариант был бы одним из наиболее оптимальных.
Спасибо, отлично работает
Атрибута id нет, как быть?
можно обратится по классу. по самому элементу img. много вариантов
спасибо за пример :)
Большое спасибо автору, очень помогло + приятный дизайн сайта)
Отлично!
Всю башку сломал как сделать слайд-шоу МИНИМАЛЬНЫМИ затратами. Прикрутил к вашему примеру обработчик по таймеру и вуаля! Все работает!!!