Замена картинок

@Tvis · Регистрация: 30.09.2015

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

Хотелось бы изменять картинки Плей/пауза
Есть вот такой допустим список.

HTML5
1
2
3
4
5
6
7
<div id="mus">
<img class="mi" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>
<img class="mi" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>
<img class="mi" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>
<img class="mi" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>
<img class="mi" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>
</div>

Хотелось бы что бы при нажатии допустим первой картинки она менялась на паузу...
Но если допустим после нажатия на 1 картинку, мы нажмем допустим на 4 крантику то первая должна опять показать плей..
Если что есть возможность задать этой картинке свое нумеровоное значение..
Допустим так

HTML5
1
2
<img class="mi_1" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>
<img class="mi_2" onclick="play()" src="PLAY.PNG" width="25" height="20"><a>тут данные</a>

Так как список у меня впринципе пронумерован.. если это надо конечно..
Заранее спасибо

@brain-4-me · 12.11.2015, 12:39

Tvis, ну как то так?

HTML5
1
2
3
4
5
6
7
<div id="mus">
<img class="mi" id='mi' src="https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50" width="25" height="20"><a>тут данные</a>
<img class="mi" id='mi' src="https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50" width="25" height="20"><a>тут данных</a>
<img class="mi" id='mi' src="https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50" width="25" height="20"><a>тут данные</a>
<img class="mi" id='mi' src="https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50" width="25" height="20"><a>тут данные</a>
<img class="mi" id='mi' src="https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50" width="25" height="20"><a>тут данные</a>
</div>

JavaScript
1
2
3
4
$('.mi').click(function(){
        $('img.mi').attr('src','https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50');
    $(this).attr('src','http://cdn.niketalk.com/c/c7/50x50px-ZC-c79bf2a9_Pause.jpeg');
});

и для примера

http://jsfiddle.net/brain4me/d5moy6fv/

@Tvis · 12.11.2015, 19:12 **[ТС]**

brain-4-me, Все отлично спасибо! =)

Добавлено через 6 часов 25 минут
brain-4-me,
Ох беда у меня...
можно как то заменять картинку только у предыдушего допустим?
а то если выполнятеся

JavaScript
1
$('img.mi').attr('src','https://lh5.googleusercontent.com/-KMaTVAioeis/AAAAAAAAAAI/AAAAAAAAABo/Pykcz5IeCOo/photo.jpg?sz=50');

Он начинает менять это у 3000тысяч элементов и начинает просто напросто зависать браузер..
Хотелось бы работать только с данным и предыдущим элементом

@brain-4-me · 12.11.2015, 20:35

Tvis, можно, как то так

JavaScript
1
2
3
4
$('img.mi').click(function(){
   $(this).addClass('mi_2');
    $('img.mi').not(this).removeClass('mi_2');
});

ну и пример
http://jsfiddle.net/brain4me/d5moy6fv/1/

со стилями я думаю разберешься

@Tvis · 13.11.2015, 01:09 **[ТС]**

brain-4-me, Очень интересный подход, спасибо проверю..

Добавлено через 28 минут
brain-4-me, Короче как я допилил, Выглядело малясь убого, по первых рамка вокруг изображения наверно зависит от браузера, я так понял что с начала браузер не получает картинку т.к. src пуст

я добавил src='Прозрачный пиксель.png' указал размеры width="25px" height="20px"
но картинки не помещялись в него, немного погуглив нашел background-size: contain;
тоесть картинка по размеру блока, получается width="25px" height="20px"

Все работает без нареканий)

Добавлено через 22 минуты
brain-4-me, Не подскажешь почему не реагирует сам по себе? вызываешь через функцию все работает,
а если

JavaScript
1
2
3
4
5
6
7
8
<script type="text/javascript">
             //если click на img.playimg , замена стилей для плей пауза
     $('img.playimg').click(function(){ 
   $(this).addClass('playimg_pause'); //у текущего добавляем класс playimg_pause замена стилей для плей пауза
     $('img.playimg').not(this).removeClass('playimg_pause'); //если это не текущий удаляем его
     }); 
    //закрыли замену стилей 
    </script>

Хоть в head хоть в верх body хоть в конец - нехочет, а запускаешь через функцию допустим

JavaScript
1
2
3
4
5
6
function start() {
     $('img.playimg').click(function(){ 
   $(this).addClass('playimg_pause'); 
     $('img.playimg').not(this).removeClass('playimg_pause');
     });
    };

И вызывая ее по тому же клику мышей по картинке все работает, но беда в том что первое нажатие ничего не меняет(
Может как то через функцию можно? или в чем проблемма?

@brain-4-me · 13.11.2015, 07:05

Tvis, а можешь показать код страницы? подумаю над этим...

@Tvis · 13.11.2015, 12:31 **[ТС]**

brain-4-me, Да лан уже не надо сделал просто 2 функции которые выполняются друг за другом и все работает...

Новые блоги и статьи Все статьи Все блоги /
Загрузка PNG-файла с альфа-каналом с помощью библиотеки SDL3_image на Android 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .	влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом

@brain-4-me 162 / 150 / 97 Регистрация: 24.12.2013 Сообщений: 744 Записей в блоге: 12
	13.11.2015, 07:05
	Tvis, а можешь показать код страницы? подумаю над этим... 0

@Tvis 6 / 6 / 1 Регистрация: 30.09.2015 Сообщений: 140
	13.11.2015, 12:31 [ТС]
	brain-4-me, Да лан уже не надо сделал просто 2 функции которые выполняются друг за другом и все работает... 0

Замена картинок

Решение