Тебе нужно перенести блок с скриптом в конец body. т.к. HTML страница рендерится по очереди кода. ниже пример где должно работать:
Смена картинок 
var i=0; var image=document.getElementById(«image»); // Добавте свои картинки через запятую var imgs=new Array(‘note.png’,’note_30.png’, ‘note_30_.png’); function imgsrc()
Отслеживать
user236980
ответ дан 4 авг 2016 в 20:48
21 1 1 бронзовый знак
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Источник: ru.stackoverflow.com
УВЕЛИЧЕНИЕ КАРТИНКИ ПРИ НАВЕДЕНИИ | HTML, CSS
Нужно, чтобы картинка менялась при нажатии на нее
Какой код в файле js нужно написать, чтобы при нажатии на картинку hello.png картинка менялась на world.png (который в той же папке, что и hello.png). Нужно, чтобы потом при повторном нажатии картинка возращалась на hello.png.
function oClick(e) < var element = document.getElementById(«f2»); if (element.style.backgroundImage) < element.style.backgroundImage = null; // clean up for next click >else < element.style.backgroundImage = «url(‘img/hell.jpg’)»; // set new value >>
Пробовал на подобие этой функции, но у меня просто картинка пропадает и при повторном нажатии ничего не происходит.
Ответы (3 шт):
var img = document.getElementById(«myPic»); img.onclick = function(event) < var target = event.target; if (target.className == «hello») < target.src = «https://via.placeholder.com/250/?text=world»; target.className = «world»; >else if(target.className == «world») < target.src = «https://via.placeholder.com/250/?text=Hello»; target.className = «hello»; >>
Перед запуском кода, добавьте картинке класс hello
Ваш код содержит такую логику где вы устанавливаете в качестве фона изображение для элемента img , который уже отрисовывает картинку. Таким образом ваше фоновое изображение будет находится под существующим.
Для изменения фона нужно использовать подход без использования элемента img. Создайте div , в css пропишите background-image , а с помощью js изменяйте его по нажатию.
Посмотрите на пример кода ниже.
var firstBgImage = ‘http://via.placeholder.com/100×100/ff0000’; var secondBgImage = ‘http://via.placeholder.com/100×100/00ffff’; var firstBgImageUrl = ‘url(«‘ + firstBgImage + ‘»)’; var secondBgImageUrl = ‘url(«‘ + secondBgImage + ‘»)’; function clickOnDiv(e)
#myPic < width: 100px; height: 100px; background-image: url(«http://via.placeholder.com/100×100/ff0000»); >
var foto = [‘https://cdn.wallaps.com/wallpapers/10000/2870.jpg’, ‘http://fnips.ru/wall/7/leopard_trava_bezhat_bolshaya_koshka_1920x1200.jpg’ ] document.querySelector(‘img’).src = foto[0]; document.querySelector(‘img’).addEventListener(‘click’, function() < if (this.src == foto[1]) < this.src = foto[0]; >else < this.src = foto[1]; >>)
Источник: husl.ru
Размеры картинок для ВК в Desygner
Смена изображения при клике по ссылке
Для того чтобы не загружать одновременно всеми изображения одну страничку (а изображений могут быть десятки), предлагаем Вам воспользоваться скриптом, который будет менять изображение на другое при клике по нужной ссылке.
Для примера покликайте по ссылкам, расположенным слева от изображения, и Вы увидите как меняется изображение без перезагрузки всей странички.
| Ссылка на изображение № 1 Ссылка на изображение № 2 Ссылка на изображение № 3 Ссылка на изображение № 4 |
 |
Для получения такого эффекта «смены» изображения предлагаем Вам воспользоваться вот таким, совсем маленьким скриптом, который необходимо будет поместить в начало Вашей странички:
JavaScript код:
< script type = «text/javascript» >
function l_image ( a ) document . example_img . src = a ;
>
В том месте Вашей странички, где Вы будете выводить ссылки и изображение, которое будет меняться на другое при клике по этим ссылкам, вставьте этот код:
Данный пример поможет Вам избежать переизбытка изображений на одной страничке сайта и улучшит общую читабельность.
Замена картинки под курсоромСмена изображения при кликеВыпадающая цветная подсказка
Дата создания: 14:24:56 03.07.2011 г.
Дата обновления: 22:36:47 08.03.2012 г.
Посещений: 63715 раз(а).
Комментарии посетителей (89 шт.):
(14:05:24 15.04.2013 г.)
Спасибо. А как дополнительно сделать так, чтобы активная ссылка меняла цвет?
Administrator
(21:10:23 15.04.2013 г.)
Добавьте для ссылок CSS стиль:
a:focus
(18:43:23 17.02.2014 г.)
Я пробовал, но на гугл хроме это не работает.
(22:42:04 30.06.2018 г.)
А как сделать так чтобы при клике на картинку она менялась на другую?
(15:48:56 16.05.2013 г.)
Спасибо, отличный скрипт, а как сделать, чтобы с картинкой было еще и текстовое описание, которое менялось при смене изображения.
Administrator
(22:48:59 17.05.2013 г.)
Держите код целиком:
function l_image (a, b) document.example_img.src = a;
document.getElementById(«example_text»).innerHTML = b;
>
| Ссылка на изображение № 1
Ссылка на изображение № 2 Ссылка на изображение № 3 Ссылка на изображение № 4 |
|
(21:24:48 19.01.2014 г.)
Подскажите, как сделать так, чтобы при обновлении страницы выбранное изображение не менялось?
Administrator
(22:02:16 19.01.2014 г.)
Тут придется записывать URL изображения в cookies, либо в сессии, но тогда придется использовать библиотеку jQuery.
(15:45:07 11.07.2015 г.)
Скрипт классно работает для одного блока Div на странице (я вывел функцию l_image в отдельный файл .js), а как сделать чтобы на странице было несколько таких блоков Div и у каждого своя группа ссылок для изменения изображения и текста?
(15:51:30 10.06.2013 г.)
Сейчас я нажимаю ссылки, в таблице меняется картинка, в моём случае она является как бы заголовком, а я хочу чтобы под картинкой появлялся поясняющий многострочный текст или скорее текстовый блок (со ссылками/картинками/форматированием текста, ну в общем всем богатством ХТМЛ). Как этого достичь?
Administrator
(17:00:14 10.06.2013 г.)
В моем комментарии Анзорию все это уже есть. Блок, в котором меняется текст —
можете расположить как Вам угодно. Текст внутри блока со всеми тегами разместите вместо ‘Просто картинка’ и т.д.
(22:09:04 11.06.2013 г.)
Это хорошо, когда текст короткий. А можно завести отдельные html файлы (например, с подробным описанием продукта) и выводить их содержимое вместо «Просто картинка»?
Administrator
(22:19:05 11.06.2013 г.)
JavaScript — браузерный язык. Для таких целей, как Вы написали, нужно использовать AJAX или jQuery.
(23:23:22 11.06.2013 г.)
Без оных технологий, но опираясь на Ваш пример и iframe всё получилось!
Подробнее — http://usefulscript.ru/forum/showthread.php?tid=219
(08:21:04 08.10.2013 г.)
День добрый. Подскажите, как можно реализовать увеличение изменяющихся картинок при наведении на них курсора мышки?
Administrator
(19:49:32 08.10.2013 г.)
Добавьте изображению класс, например, > В стили пропишите следующее .l_image:hover
(20:28:06 08.10.2013 г.)
Простите, не совсем корректно выразился. Нужно сделать «лупу» на картинках, которые меняются.
Т.е., например, кликнул по первой ссылке, посмотрел картинку через лупу, кликнул по второй ссылке, посмотрел другую картинку через лупу и так далее.
(03:15:59 29.01.2014 г.)
А как сделать слайдер, который менял бы содержимое по нажатию кнопок вправо и влево.
Administrator
(20:18:44 29.01.2014 г.)
Вам, наверно, будет лучше воспользоваться другим нашим скриптом — Автоматическая смена изображений. Единственное, что там надо исправить, так это удалить таймер, а вместо ссылок «Предыдущая» и «Следующая» использовать кнопки.
(01:00:18 30.01.2014 г.)
Подскажите, пожалуйста, а как сделать что бы по клику на ссылку, данные сохранялись в буфер обмена? Т.е. сохранялись в памяти для вставки?
Вот, например, я кликнул по первой ссылке, а у меня в буфер сохранился адрес картинки?
Заранее благодарю за любую помощь или ссылки.
(13:03:16 08.02.2014 г.)
Ребят, подскажите, как индикатор загрузки сделать. Просто я добавила 10 картинок с размером от 500 и более кб и страничка долго грузиться.
Administrator
(15:26:51 08.02.2014 г.)
Посмотрите в нашей теме — Индикатор загрузки сайта.
(11:25:48 10.02.2014 г.)
Добрый день! Подскажите, как сделать, чтобы при нажатии на ссылку, она становилась активной.
(22:36:27 17.02.2014 г.)
День добрый!
Не подскажете, возможно ли реализовать подгрузку контента из SQL?
Или я что-то не верно сделал:
while($news = mysql_fetch_array($qr_result)) echo ‘
‘;
>
?>
Смена контента при клике не происходит.
Заранее спасибо.
Administrator
(23:35:25 17.02.2014 г.)
(00:42:59 18.02.2014 г.)
Огромное спасибо!
frame/img описался, пока варианты пробовал.
Причем, видел эти кавычки, а как вторые поставить — не владею.
P.S. Вдруг кто еще столкнется, если в базе текст «example_text» содержит кавычки «» — не работает, но не проблема, имхо.
Максим Фролов
(13:59:00 01.04.2014 г.)
Добрый день Вам!
Хороший скрипт. В html встает нормально, но вот если его вставлять в шаблон WordPress (например), на страницу, то адрес картинок не читает, точнее просто не может пройти по ссылке и не отображает изображение(‘img/0_2.jpg’).
Плагин установил «Allow Javascript in posts and pages», реакции «0». Пробовал прописать полный путь к изображению (‘krivbass-krepost/wp-content/themes/medical_treatment_wp_theme/img/0_2.jpg’), тот же «0».
Помогите, пожалуйста. Заранее благодарен.
Administrator
(20:10:59 01.04.2014 г.)
Трудно сказать, от чего это происходит на конкретном сайте. Попробуйте посмотреть исходный код странички в браузере, возможно, движок экранирует кавычки или еще как-то искажает код.
P.S. Глянул Ваш сайт, у Вас неправильно указаны пути до изображений (попробуйте указать полный путь)!
(00:12:26 08.08.2014 г.)
Как необходимо изменить скрипт, чтобы его можно было использовать неоднократно на сайте?
Перец Дмитрий
(11:28:31 08.08.2014 г.)
Добрый день!
Если на странице необходимо вывести несколько блоков с картинками. Структура следующая: 
ссылка 11, ссылка12 
ссылка 21, ссылка22
Как необходимо изменить функцию, чтобы данная структура заработала или это можно по другому реализовать?
Administrator
(21:56:40 08.08.2014 г.)
Ответил на форуме — http://usefulscript.ru/forum/showthread.php?tid=292
(16:38:01 29.08.2014 г.)
А почему не меняет цвет активной ссылки? Пробовал на гугл хроме и на опере и яндекс браузере но не работает.
a:focus
Administrator
(21:20:02 29.08.2014 г.)
(02:17:55 29.11.2014 г.)
Подскажите, пожалуйста, код для появления следующей картинки с задержкой в пару секунд. Спасибо.
Administrator
(17:22:28 29.11.2014 г.)
Попробуйте скрипт плавной смены изображений на jQuery.
(08:02:18 20.01.2015 г.)
Очень простое и классное решение. Но, вот вопрос: как сделать смену изображений и текста плавным, а не резким как в примере?
Administrator
(21:22:09 20.01.2015 г.)
А чем Вас не устраивает скрипт из комментария выше Вашего? При желании в нем можно удалить строчку play=setInterval(«chgImg(0)», 5000); чтобы изображения не сменялись автоматически.
(10:32:42 21.01.2015 г.)
Спасибо, получилось на основе скрипта из комментария выше сделать смену изображений плавным. Но, теперь встала другая проблема. В скрипте с использованием jQuery для смены изображений пользователь кликает не по ссылкам, а по текстовым строчкам. Это конечно удобно, в том плане, что при клике по строке страница не поднимается наверх.
Но, вот вопрос, можно ли реализовать подсвечивание той строчки, которая активна в данный момент. Т.е. изначально строка ‘Картинка 1’ имеет отличный от других цвет. Затем, при клике по строчке ‘Картинка 3’ (к примеру), эта строчка меняла цвет на активную, чтобы пользователь понимал, какую картинку он сейчас смотрит. Заранее спасибо.
Источник: usefulscript.ru