Всем привет!
Решил сегодня выложить маленький, готовый скрипт для выпадающего списка.
В чем же заключается сама фишка скрипта? В том, что при выборе пункта из списка, меняется соответствующая картинка. Вот, например, из списка выбираете пункт «metallica» и появляется соответствующая картинка группы.
Я думаю, вы найдете хорошее применение этого скрипта у себя на сайте.
Итак, сам код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>скрипт на блоге bloggood.top</title>
</head>
<body>
<div>
<select onchange="document.getElementById('image').src=this.value">
<option value="metallica.jpg">Metallica</option>
<option value="pod.jpg">P.O.D.</option>
<option value="type-o-negative.png">Type o negative</option>
<option value="helloween.png">helloween</option>
</select>
</div>
<br>
<div class="image"><img id="image" src="metallica.jpg" alt=""></div>
</body>
</html>
Я думаю, как менять картинки в коде вы знаете и как добавлять пункты в выпадающий список вы тоже умеете. Если нет, тогда рекомендую почитать вот эту статейку.
Результат скрипта можете посмотреть вот тут:
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Мое первое приложение для смартфонов (андроид) – основы HTML
События HTML5
Перетаскивание изображения — использование Drag and Drop в html 5
Как сделать подпись под картинкой в HTML5Похожие статьи
Ввод чисел на HTML5
Грамотное составление мета-тегов
Как сделать резиновый фон для сайта на jQuery
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 331671 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 275609 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 226702 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 193199 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 187094
3 Ответов на комментарий - Скрипт для выпадающего списка
Добавить комментарий
Метки: html, javascript, для сайта, эффекты для сайта
Полезная штука. А как сделать, чтобы по умолчанию в поле стояла какая-нибудь надпись. И чтобы при выборе какого-нибудь пункта происходил переход по ссылке в этом пункте.
Не знаю, Юрий, правильно ли я Вас понял, вот готовый скрипт:
Здравствуйте!А не могли бы подсказать. как сделать чтобы каждая картинка выпадающего списка была бы ссылкой?