С помощью этого скрипта, основанного на DHTML и JavaScript вы сможете заменить одну картинку на другую, при наведении на нее мышкой — таким образом можно поменять любую картинку от баннера до шапки сайта
Для начала нужен код картинки, он будет выглядеть следующим образом:
<img src="https://cs-frukt.ru/img/news/gl1.jpg" width="300px" height="150px" onMouseOver="this.src=’https://cs-frukt.ru/img/news/gl2.jpg’" onMouseOut="this.src=’https://cs-frukt.ru/img/news/gl1.jpg’">
где src="https://cs-frukt.ru/img/news/gl1.jpg" -ссылка на 1 картинку onMouseOver="this.src=’https://cs-frukt.ru/img/news/gl2.jpg’" — DHTML код с ссылкой на 2 картинку (дает сам эффект) onMouseOut="this.src=’https://cs-frukt.ru/img/news/gl1.jpg’" — скрипт возвращающий стандартную картинку, после того, как уберете мышку
Все бы хорошо, но при наведении на изображение второму придется грузится, что портит весь эффект, поэтому нужен JavaScript код, отвечающий за автономную загрузку второй картинки в браузер наравне с первой:
<script> var img1=new Image(); img1.src=’https://cs-frukt.ru/img/news/gl1.jpg’ ; var img2=new Image(); img2.src=’https://cs-frukt.ru/img/news/gl2.jpg’ ; </script>
Его вставляем в любое место на странице, желательно до кода самой картинки
