Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.01.2017, 01:59
Новичок на форуме
Отправить личное сообщение для REDiRECT72 Посмотреть профиль Найти все сообщения от REDiRECT72
 
Регистрация: 29.12.2016
Сообщений: 5

Подмена ссылки изображения и возврат на исходное
Здравствуйте! Нужна помощь, знания JS плачевные
Имеется простенький скрипт замены изображения при клике на ссылку
<script type="text/javascript">
    function l_image (b,a) { document.getElementById(b).src=a; }
</script>

<img src="img_1.png" id="layer_1"></br>
<a href="javascript:l_image('layer_1','img_2.png')">Заменить</a>

Подскажите пожалуйста, как доработать скрипт, чтобы при повторном нажатии изображение изменялось на изначальное?
Ответить с цитированием
  #2 (permalink)  
Старый 22.01.2017, 02:29
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

REDiRECT72,
<script type="text/javascript">
function l_image(a, b) {
    a = document.getElementById(a);
    var c = a.dataset.src || b;
    a.dataset.src = c == b ? a.src : "";
    a.src = c
};
</script>





<img src="http://2.bp.blogspot.com/-u1FR4Lms-F0/T3Fe686C8kI/AAAAAAAAAWg/NzQmVkK0fwc/s400/mice.png" id="layer_1"></br>


<a href="javascript:l_image('layer_1','http://www.creaturecarer.co.uk/0_0_0_0_250_241_library_74311.png?u=551485338')">Заменить</a>
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2017, 03:25
Новичок на форуме
Отправить личное сообщение для REDiRECT72 Посмотреть профиль Найти все сообщения от REDiRECT72
 
Регистрация: 29.12.2016
Сообщений: 5

Благодарю за быстрый ответ! Решение почти верное, но ошибка моя, не упомянул некоторые условия. Опишу принцип действия, имеется список картинок в модальном окне, само окно вызывается по щелчку на основную картинку. При клике на картинку из списка она становится активной (присваивается дополнительный класс с рамкой - например "active") и её ссылка на изображение копируется на место основного изображения.
Получается, что Ваш вариант работает только с единичным элементом, но если их несколько? Так же обратил внимание, что при быстром двойном нажатии скрипт не успевает обрабатываться и срабатывает только один раз.

Структура примерно такая:

<script type="text/javascript">
    function l_image (b,a) { document.getElementById(b).src=a; }
</script>

<img src="img_1.png" id="layer_1"></br>
<img src="img_2.png" id="layer_2"></br>

<a href="javascript:l_image('layer_1','img_1.png')">red</a>
<a href="javascript:l_image('layer_1','img_2.png')">green</a>
<a href="javascript:l_image('layer_1','img_3.png')">blue</a>

<a href="javascript:l_image('layer_2','img_2.png')">magenta</a>
<a href="javascript:l_image('layer_2','img_3.png')">yellow</a>
<a href="javascript:l_image('layer_2','img_4.png')">black</a>

Последний раз редактировалось REDiRECT72, 22.01.2017 в 03:28.
Ответить с цитированием
  #4 (permalink)  
Старый 22.01.2017, 03:26
Новичок на форуме
Отправить личное сообщение для REDiRECT72 Посмотреть профиль Найти все сообщения от REDiRECT72
 
Регистрация: 29.12.2016
Сообщений: 5

И не могли бы Вы дать комментарии к коду? Хотелось бы вникнуть

Последний раз редактировалось REDiRECT72, 22.01.2017 в 03:29.
Ответить с цитированием
  #5 (permalink)  
Старый 22.01.2017, 03:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,072

REDiRECT72,
без коментариев ...
function l_image(a, b) {
    a = document.getElementById(a);
    var c = a.dataset.src || (a.dataset.src=a.getAttribute('src'));
    a.src = a.getAttribute('src') == b ? c : b
};
Ответить с цитированием
  #6 (permalink)  
Старый 22.01.2017, 04:02
Новичок на форуме
Отправить личное сообщение для REDiRECT72 Посмотреть профиль Найти все сообщения от REDiRECT72
 
Регистрация: 29.12.2016
Сообщений: 5

Огромное спасибо! Теперь всё работает как надо
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Собрать ссылки на изображения из iframe ff451000s Events/DOM/Window 9 21.12.2016 08:16
Возврат в исходное состояние кнопки solobutova@mail.ru Элементы интерфейса 13 13.04.2016 18:14
Копирование ссылки и подмена рефера YarRusvn Работа 3 27.09.2013 17:43
Необходимо скрыть ссылки, кроме ведущих на изображения Keksman jQuery 4 04.03.2012 20:17
Разные изображения - разные ссылки sunrec Общие вопросы Javascript 13 20.11.2011 22:00