Мой 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>
Когда кто-то нажимает на изображение, я хочу, чтобы изображение src изменилось на <img src="imgx_off.gif">, где x представляет номер изображения 1 или 2.
Возможно ли это, или мне нужно использовать CSS для изменения изображений?
Вы можете использовать функцию jQuery attr(). Например, если ваш тег img имеет атрибут id "my_image", вы должны сделать это:
<img id="my_image" src="first.jpg"/>
Затем вы можете изменить src вашего изображения с помощью jQuery следующим образом:
$("#my_image").attr("src","second.jpg");
Чтобы прикрепить это к событию click, вы можете написать:
$('#my_image').on({
'click': function(){
$('#my_image').attr('src','second.jpg');
}
});
Чтобы повернуть изображение, вы можете сделать это:
$('img').on({
'click': function() {
var src = ($(this).attr('src') === 'img1_on.jpg')
? 'img2_on.jpg'
: 'img1_on.jpg';
$(this).attr('src', src);
}
});
Одна из распространенных ошибок, которые люди делают при изменении источника изображения, не ждет загрузки изображения после действий, таких как созревание размера изображения и т.д.
Вам понадобится использовать метод jQuery .load(), чтобы делать материал после загрузки изображения.
$('yourimageselector').attr('src', 'newsrc').load(function(){
this.width; // Note: $(this).width() will not work for in memory images
});
Причина редактирования: fooobar.com/questions/14665/...
Для получения дополнительной информации. Я пытаюсь установить атрибут src с помощью метода attr в jquery для изображения объявления, используя синтаксис, например: $("#myid").attr('src', '/images/sample.gif');
Это решение полезно, и оно работает, но если изменение пути изменяет также путь к изображению и не работает.
Я искал решение этой проблемы, но ничего не нашел.
Решение ставит '\' в начале пути:
$("#myid").attr('src', '\images/sample.gif');
Этот трюк очень полезен для меня, и я надеюсь, что он полезен для других.
Я покажу вам, как изменить изображение src, чтобы при щелчке изображения он вращался по всем изображениям, которые находятся в вашем HTML (в вашем классе d1 id и c1)... есть ли у вас 2 или больше изображений в вашем HTML.
Я также покажу вам, как очистить страницу после того, как документ будет готов, так что сначала отобразится только одно изображение.
Полный код
$(function() {
var $images = $("#d1 > .c1 > a").clone();
var $length = $images.length;
var $imgShow = 0;
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src",
$("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
});
Пробой
Создайте копию ссылок, содержащих изображения (обратите внимание: вы также можете использовать атрибут href ссылок для добавления функциональности... например отображает рабочую ссылку под каждым изображением):
var $images = $("#d1 > .c1 > a").clone(); ;
Проверьте, сколько изображений было в HTML и создайте переменную для отслеживания изображения:
var $length = $images.length;
var $imgShow = 0;
Измените HTML-документ таким образом, чтобы отображалось первое изображение только. Удалите все остальные изображения.
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") );
Привязать функцию, которая будет обрабатываться при нажатии ссылки на изображение.
$("#d1 > .c1 > a").click(function(event) {
$(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
event.preventDefault();
});
В сердце этого кода используется ++$imgShow % $length для циклического перехода через объект jQuery, содержащий изображения. ++$imgShow % $length сначала увеличивает наш счетчик на единицу, тогда он меняет число с количеством изображений. Это приведет к циклическому циклическому индексированию индекса от 0 до length-1, которые являются индексами объекта $images. Это означает, что этот код будет работать с изображениями 2, 3, 5, 10 или 100... циклически перемещаясь по каждому изображению в порядке и перезапуская на первом изображении при достижении последнего изображения.
Кроме того, .attr() используется для получения и установки атрибута src для изображений. Чтобы выделить элементы из объекта $images, я установил $images как контекст jQuery, используя форму $(selector, context). Затем я использую .eq(), чтобы выбрать только элемент с конкретным индексом, который меня интересует.
Вы также можете сохранить src в массиве.
Пример jsFiddle с 3 изображениями
И здесь, как включить hrefs из привязанных меток вокруг изображений:
Пример jsFiddle
ЕСЛИ существует не только jQuery или другие ракеты для уничтожения ресурсов - многие kb загружаются каждый раз каждым пользователем только для простого трюка, но также и для обычного JavaScript (!):
<img src="img1_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg"
onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">
Это может быть написано общим и более элегантным:
<html>
<head>
<script>
function switchImg(img){
img.src = img.src.match(/_on/) ?
img.src.replace(/_on/, "_off") :
img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
<img src="img1_on.jpg" onclick="switchImg(this)">
<img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>
Надеюсь, что это может работать
<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>
$(document).ready(function() {
var flag = 0;
$("button#changeSize").click(function() {
if (flag == 0) {
$("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
flag = 1;
} else if (flag == 1) {
$("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
flag = 0;
}
});
});
Вы также можете сделать это с помощью jQuery следующим образом:
$(".c1 img").click(function(){
$(this).attr('src','/new/image/src.jpg');
});
У вас может быть условие, если для источника изображения есть несколько состояний.
У меня была такая же проблема при попытке вызвать кнопку re captcha. После некоторого поиска теперь нижняя функция отлично работает практически во всех известных браузерах (хром, Firefox, IE, Edge,...):
function recaptcha(theUrl) {
$.get(theUrl, function(data, status){});
$("#captcha-img").attr('src', "");
setTimeout(function(){
$("#captcha-img").attr('src', "captcha?"+new Date().getTime());
}, 0);
}
'theUrl' используется для визуализации нового изображения captcha и может быть проигнорирован в вашем случае. Наиболее важным моментом является создание нового URL-адреса, который заставляет FF и IE перерисовывать изображение.
Если вы хотите что-то использовать с помощью jQuery, вы можете посмотреть в jQuery Cycle Plugin, demo scrollRight (внизу справа)
Сегодня у меня такое же удивление, что и я:
//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');
});
Это гарантированный способ сделать это в Vanilla (или просто Pure) JavaScript:
var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
Просто дополнение, чтобы сделать его еще более крошечным:
$('#imgId').click(function(){
$(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
Изменить источник изображения с помощью jQuery click()
элемент:
<img class="letstalk btn" src="images/chatbuble.png" />
код:
$(".letstalk").click(function(){
var newsrc;
if($(this).attr("src")=="/images/chatbuble.png")
{
newsrc="/images/closechat.png";
$(this).attr("src", newsrc);
}
else
{
newsrc="/images/chatbuble.png";
$(this).attr("src", newsrc);
}
});
Невозможно изменить источник изображения с помощью CSS.
Только возможно использовать Javascript или любой Javascript, например jQuery.
Изображения находятся внутри div, и с этим изображением нет class или id.
Таким образом, логика будет выбирать элементы внутри div, где находятся изображения.
Затем выберите все элементы изображений с контуром и измените изображение src с помощью Javascript/jQuery.
$(document).ready(function()
{
$("button").click(function()
{
$("#d1 .c1 a").each(function()
{
$(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
});
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<div id="d1">
<div class="c1">
<a href="#"><img src="img1_on.gif"></a>
<a href="#"><img src="img2_on.gif"></a>
</div>
</div>
<button>Change The Images</button>Вы должны добавить атрибут id в тег изображения, например:
<div id="d1">
<div class="c1">
<a href="#"><img id="img1" src="img1_on.gif"></a>
<a href="#"><img id="img2" src="img2_on.gif"></a>
</div>
</div>
тогда вы можете использовать этот код для изменения источника изображений:
$(document).ready(function () {
doSomething();
$("#img1").attr({ "src": "logo-ex-7.png" });
$("#img2").attr({ "src": "logo-ex-8.png" });
});