Вопрос: Возможно ли поменять у рисунка src, используя только jQuery?
Ниже представлен HTML код, следующего вида:
<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':
<img id="my_image" src="first.jpg"/>
Далее, вы можете изменить src с помощью jQuery, следующим образом:
$("#my_image").attr("src","second.jpg");
Чтобы приделать этот код на событие нажатия кнопки мыши, мы должны написать:
$("#my_image").bind("click", function() {
$("#my_image").attr("src","second.jpg");
});
Чтобы менять изображение, вы должны написать следующее:
$("img").bind("click", function() {
var src = ($(this).attr("src") === "img1_on.jpg")
? "img2_on.jpg"
: "img1_on.jpg";
$(this).attr("src", src);
});