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

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

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

<img style="float:left; margin-right:15px; cursor:pointer;" id="myImage" onclick="changeImage()" src="pic_bulboff.gif" width="80" height="115"> Дальше понадобится разместить код скрипта, отвечающего за обработку нажатия на зону картинки:

function changeImage() {
 var image = document.getElementById('myImage');
 if (image.src.match("bulbon")) {
 image.src = "pic_bulboff.gif";
 } else {
 image.src = "pic_bulbon.gif";
 }
}

В скрипте надо только поменять пути к картинкам на ваши, также можно поменять id. Применение скрипта ограничено только вашей фантазией.