DWWEB.RU

Изменить картинку в javascript Заменить путь картинки, src

2018/08/21 Марат 685 0 JS | FOTO |

У нас возникла необходимость получить путь картинки, потом его заменить на другой путь! Другими словами - мы будем менять картинку в javascript при клике!

Для этого нам понадобится 1. две картинки – давайте возьмем две фотки, чтобы далеко не ходить со страницы обо мне! Там как раз есть две картинки, которые и будем менять!2. Волшебный метод getelementbyid, 3. событие onclick + 4. Уникальный идентификатор

Друзья!

Наши страницы – это всего лишь примеры! Не обязательно выполнять именно таким образом, не забываем! Что программирование – это не математика, где возможен один, очень редко два варианта решения!

Ну и конечно! Как же без вариантов! Мы сделаем несколько вариантов:

1.

Изменение картинки при клике на кнопку в javascript

Первым и простым вариантом будет самое простое – все повесим в одну строчку и прямо на кнопку, вот, что у нас получилось:

2.

Изменение картинки при клике на кнопку через функцию в javascript

Второй вариант смены картинки с помощью яваскрипта, но уже через функцию, это у нас уже получится две строчки!

Кнопка к событием внутри и функция. Которая это все обработает! А во внутри поместим наш волшебный метод, который и поменяет нам нашу картинку!

3.

Изменение картинки при клике на картинку в javascript

Теперь давайте сделаем таким образом. Чтобы если кто-то кликнет по картинке, то картинка изменится! Просто нажмите на картинку!

Не забудь !
Посмотреть пример и скачать можно по ниже идущей ссылке

Скрипт № 53.2
Название скрипта и номер :Изменить картинку при нажатии JS
Пример - Изменить картинку при нажатии JS
Скачать - архив
Все скрипты на одной странице
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+=
Подписаться
Теги:

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019