Кодинг
★ Рубрика: Кодинг
★ Тема: JavaScript

Меняем картинку по клику

Здесь приведена демонстрация как можно менять картинку по клику мышкой. Попробуйте кликнуть по лампочке. А затем еще раз. Создается эффект включения и выключения лампочки.

На самом деле здесь меняются по клику две картинки. Эффект достигается за счет хитрого приема - меняется только часть картинки, а точнее цвет части картинки. Подобный переключатель картинок по клику достаточно востребован. Для достижения такого эффекта вам понадобятся две картинки. В нашем примере вы можете их скачать по ссылкам: pic_bulboff.gif и pic_bulbon.gif. Затем необходимо разместить начальную картинку на веб-странице. Для этого можно использовать код, пример которого приведен ниже. В это коде важен id="myImage" и реакция на клик: onclick="changeImage()".

Дальше понадобится разместить код скрипта, отвечающего за обработку нажатия на зону картинки:
function changeImage() {
 var image = document.getElementById('myImage');
 if (image.src.match("bulbon")) {
 image.src = "pic_bulboff.gif";
 } else {
 image.src = "pic_bulbon.gif";
 }
}
В скрипте надо только поменять пути к картинкам на ваши, также можно поменять id. Применение скрипта ограничено только вашей фантазией.
 Похожие публикации: JavaScript

Войти и комментировать [ Вход | Регистрация ]