Смена картинки в img по клику

@Возмездие · Регистрация: 30.01.2016

Студворк — интернет-сервис помощи студентам

HTML5
1
2
3
<div class="">
<img src=путь к картинке</img>
</div>

нужно сделать для такой разметки slidetoogle правильный, т.е чтобы у src менялась по клику стрелочка, и происходило выезжание информации

@AmateR62 · 27.02.2016, 12:32

А если по-русски сформулировать задачу, как она будет звучать?

@Возмездие · 27.02.2016, 13:00 **[ТС]**

Сообщение от AmateR62

А если по-русски сформулировать задачу, как она будет звучать?

кликаешь по стрелочке, стрелочка опускается вниз выезжает информация, кликаешь еще раз по стрелочке, стрелочка меняет положение вверх,информация заезжает обратно

Добавлено через 5 минут
разметка у меня такая

HTML5
1
2
3
<div class="ОТ">
<img src=путь к картинке</img>
</div>

HTML5
1
<div class="">тут моя вся инфа которая должна выехать</div>

@AmateR62 · 27.02.2016, 13:09

Ну... можно как то так:

HTML5
1
2
3
4
<div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</div>
<div class="strelka">
  <img src="http://codernote.ru/files/arrow.jpg">
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.text {
  display: none;
}
 
.strelka img {
  width: 40px;
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.strelka img.rotate {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

JavaScript
1
2
3
4
5
6
$( function() {
  $('img').click(function(event) {
    $(".text").slideToggle("slow");
    $(this).toggleClass("rotate");
  })
})

Поглядеть: http://codepen.io/AmateR/pen/grOmYm

@Возмездие · 27.02.2016, 13:33 **[ТС]**

Сообщение от AmateR62

Ну... можно как то так:

http://pcvector.ru/t989 пример первый пост нажми инфа выпадет, я это все сделал, а вот чтобы стрелочка меняла положение вверх вниз в src не могу, понять как составить jquery функцию

@AmateR62 · 27.02.2016, 13:45

Вы про стрелочку при просмотре информации о пользователе?
В моем примере я не меняю картинку, я её просто переворачиваю - присваиваю класс "rotate":

CSS
1
2
3
4
5
6
7
.rotate {
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
       -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}

Строка которая отвечает за присваивание класса:

JavaScript
1
$(this).toggleClass("rotate");

Т.е. кликнули по картинке, либо присвоили класс либо его убрали. Соответственно с классом картинка развернута на 180 градусов без класса у неё обычное состояние.

Если вы хотите именно поменять картинку, то тогда:

JavaScript
1
$('.ОТ img').attr("src","ваша новая картинка"); // если брать ваш код

@Возмездие · 27.02.2016, 13:56 **[ТС]**

Сообщение от AmateR62

Вы про стрелочку при просмотре информации о пользователе?

да про информацию, мне уже дали код функции, той выезжающей инфы он таков

JavaScript
1
2
3
4
5
$(function(){
    $(".info_button").click(function() {
    $(this).closest('.autor_post').find('.user_info').slideToggle(slow);
    });
});

теперь мне нужно добавить стрелочку чтобы меняло положение
что в этот код нужно добавить? я не много сначала запутал вас извиняюсь

@AmateR62 · 27.02.2016, 14:01

JavaScript
1
2
3
4
5
6
7
8
$(function(){
    $(".iinfo_button").click(function() {
        $(this).closest('.autor_post').find('.user_info').slideToggle(slow);
        $(this).attr("src","ваша новая картинка"); // если хотите показать другую картинку (например у вас есть картинка перевернутой стрелки)
        $(this).toggleClass("iinfo_button_rotate"); // либо мой вариант с переворачиванием существующей картинки, но главное в css пропишите код класса iinfo_button_rotate (см. мое предыдущее сообщение)
        
    });
});

@Возмездие · 27.02.2016, 14:16 **[ТС]**

Сообщение от AmateR62

$(function(){
$(".iinfo_button").click(function() {
$(this).closest('.autor_post').find('.us er_info').slideToggle(slow);
$(this).attr("src","ваша новая картинка"); // если хотите показать другую картинку (например у вас есть картинка перевернутой стрелки)
$(this).toggleClass("iinfo_button_rotate "); // либо мой вариант с переворачиванием существующей картинки, но главное в css пропишите код класса iinfo_button_rotate (см. мое предыдущее сообщение)

срабатывает только раз, если нажать первый раз инфа выезжает замена с close на open происходит, а если второй раз нажимаешь чтобы заехала инфа уже с open на close стрелка не меняется

@AmateR62 · 27.02.2016, 14:18

А вы какой способ использовали? Замену картинки на другую или переворот существующей?

@Возмездие · 27.02.2016, 14:32 **[ТС]**

Сообщение от AmateR62

А вы какой способ использовали? Замену картинки на другую или переворот существующей?

замену

@AmateR62 · 27.02.2016, 14:41

Да... с заменой надо проверять какая сейчас отображается картинка и дописать функцию на возврат старой картинки. Как вариант:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
    $(".iinfo_button").click(function() {
        $(this).closest('.autor_post').find('.user_info').slideToggle(slow);
        $(this).toggleClass("rotate_img"); // по классу будем определять какую картинку показывать
        
        if $("img").is(".rotate_img") $(this).attr("src","старая картинка") // если есть картинка с классом rotate_img значит надо показать старую картинку
        else $(this).attr("src","новая картинка"); // а если нет, то значит новую
        
    });
});

@Возмездие · 27.02.2016, 14:58 **[ТС]**

Сообщение от AmateR62

Да... с заменой надо проверять какая сейчас отображается картинка и дописать функцию на возврат старой картинки. Как вариант:

вообще перестало работать с таким кодом а вот этот пример нельзя переделать под мое http://www.wisdomweb.ru/editor... jq_effect4

@AmateR62 · 27.02.2016, 15:07

Странно, что не работает. Пример... можно конечно, попробуйте:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
    $(".iinfo_button").click(function() {
        $(this).closest('.autor_post').find('.user_info').slideToggle(slow);        
    });
 
    $(".iinfo_button").toggle( function() {
        $(".iinfo_button").attr("src","новая картинка")}, function(){
        $(".iinfo_button").attr("src","старая картинка")
    });
});

@Возмездие · 27.02.2016, 15:35 **[ТС]**

так же не работает

Добавлено через 2 минуты
пост номер 8 только работает но там одна смена только происходит

@AmateR62 · 27.02.2016, 15:58

А вы какую версию JQuery подключаете? С версии 1.9 не будет работать - убрали...

По моему решению - у меня там синтаксическая ошибка, и с логикой немного перепутал. Должно быть вот так:

JavaScript
1
2
3
4
5
6
7
8
9
10
$(function(){
    $(".info_button").click(function() {
        $(this).closest('.autor_post').find('.user_info').slideToggle(slow);
        $(this).toggleClass("rotate_img"); // по классу будем определять какую картинку показывать
        
        if ( $("img").is(".rotate_img") ) $(this).attr("src","новая картинка") // если есть картинка с классом rotate_img значит надо показать новую картинку
        else $(this).attr("src","старая картинка"); // а если нет, то старую
        
    });
});

Вот тут работает: http://codepen.io/AmateR/pen/grOmYm

@Возмездие · 27.02.2016, 16:22 **[ТС]**

Сообщение от AmateR62

Вот тут работает

синтаксические ошибки какие то происходят если удалить // или поставить в конце кода не так }) а вот так }); то перестает работать

@AmateR62 · 27.02.2016, 16:24

Покажите свой код.

@Возмездие · 27.02.2016, 16:44 **[ТС]**

Сообщение от AmateR62

Покажите свой код.

все разобрался что то в самом шаблоне тупило, только один вопрос если я класс .rotate_img не прописал то чем мне заменить в коде if ( $("img").is(".rotate_img") ) $(this).attr("src","новая картинка") rotate_img

@AmateR62 · 27.02.2016, 18:19

Класс rotate_img нужен только для того, чтобы определить какая картинка сейчас показывается - если есть этот класс, то значит сейчас показывается перевернутая картинка, если нет - стандартная. Ни в css ни в html не обязательно его использовать. Конечно если вы хотите перевернутой картинке назначить какие то стили, то можно им и воспользоваться.

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	27.02.2016, 12:32
	А если по-русски сформулировать задачу, как она будет звучать? 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	27.02.2016, 14:18
	А вы какой способ использовали? Замену картинки на другую или переворот существующей? 0

@Возмездие 1 / 1 / 0 Регистрация: 30.01.2016 Сообщений: 52
	27.02.2016, 15:35 [ТС]
	так же не работает Добавлено через 2 минуты пост номер 8 только работает но там одна смена только происходит 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	27.02.2016, 16:24
	Покажите свой код. 0

@AmateR62 118 / 118 / 87 Регистрация: 24.02.2014 Сообщений: 404
	27.02.2016, 18:19
	Класс rotate_img нужен только для того, чтобы определить какая картинка сейчас показывается - если есть этот класс, то значит сейчас показывается перевернутая картинка, если нет - стандартная. Ни в css ни в html не обязательно его использовать. Конечно если вы хотите перевернутой картинке назначить какие то стили, то можно им и воспользоваться. 0

Смена картинки в img по клику

Решение