Рассмотрим такой эффект, как смена изображения при наведении курсора мыши не нова, и часто ее используется на сайтах для различных целей. Например, в интернет-магазине эту функцию можно применить для показа товара в другом ракурсе. Подведя курсор мыши на картинку, появляется второе изображение.
Еще с помощью этого эффекта можно легко создавать анимированные кнопки для сайтов. Но, а если подумать, то применить его можно во многих случаях. Примеры, Вы можете посмотреть по этой ссылке
Данный эффект можно получить многими способами, но я покажу самый простой. Скопируйте HTML-код ниже, и вставьте его в нужное место на странице сайта.
|
1 |
<center><a href="ССЫЛКА НА СТРАНИЦУ"><img style="border: 0px;" onmouseover="this.src='КАРТИНКА-2';" onmouseout="this.src='КАРТИНКА-1';" alt="текст" src="КАРТИНКА-1" width="500" height="500" /></a></center> |
Для получения данного эффекта, нужны две картинки одинакового размера.
Если у Вас сайт на движке WordPress, тогда вставлять код нужно в текстовом редакторе, и на визуальный редактор не переключаться. Вот так просто делается смена изображения при наведении курсора мыши.
