Мой Красивый Блог - смена картинки при наведении мыши

Привет, хорошие!

После окончания курса я обещала время от времени писать небольшие уроки по оформлению и раскрывать секреты, которые не попали в основной курс. Сегодня начинаю сдерживать обещание :) Расскажу о двух способах создания картинки, которая меняется при наведении на нее курсора мыши.

Выглядит такой эффект так:


Таким способом удобно размещать на панелях картинки-кнопки, при наведении на которые посетитель будет получать дополнительную информацию, которая его заинтересует и побудит нажать на кнопку. :) Я сделала кнопку для приглашения на свой мастер-класс.

Прежде всего нам нужно создать два изображения одинакового размера. Лучше сразу уменьшить их до размера, нужного для размещения на панели или в сообщении. В моем случае получились две такие картинки 240 х 240 пикселей:

Эти изображения нужно загрузить на какой-нибудь сервер, чтобы присвоить им интернет-адрес (надеюсь, мы все помним как это делается))).

Если мы хотим разместить картинку в сообщении, то создаем новое сообщение и далее работаем в режиме редактирования HTML.
Если нужно повесить картинку на боковую панель, в Блоггере во вкладке Дизайн создаем новый Гаджет HTML.

Способ №1

Копируем и вставляем в поле сообщения или гаджета следующий код:

<style type="text/css"> 

.izo { 

background: url(адрес картинки №1) no-repeat 50% 50%;  

display: block;

width: ширина картинки в пикселях px; 

height: высота картинки в пикселях px; 

}

.izo:hover { 

background: url(адрес картинки №2) no-repeat 50% 50%; 

} </style> 

<a class="izo" href="адрес, куда ведет картинка"></a>

Вместо выделенного текста вставляем необходимые данные: адреса картинок (№1 - та, что будет "главной", №2 - так, которая будет появляться при наведении мыши) и их настоящий размер, например у меня было так:

width: 240px; 

height: 240px; 

А также указываем ссылку на страницу, куда будет переходить читатель при нажатии.

Сохраняем и проверяем! Надеюсь, у вас все получилось)

Способ №2

Похож на первый способ, только код тут покороче:

<p><img src="адрес картинки №1" width="ширина картинки в пикселях" height="высота картинки в пикселях"
onmouseover="this.src='адрес картинки №2'; this.width=ширина картинки в пикселях;this.height=высота картинки в пикселях;"
onmouseout="this.src='адрес картинки №1'; this.width=ширина картинки в пикселях;this.height=высота картинки в пикселях;" /></p>

Заполняем все нужные поля и сохраняем.

Если вы вставляете коды в тело сообщения в режиме HTML, то после переключения в режим редактирования картинки не видно. Чтобы убедится, что она вставилась, нажмите Просмотр. В этом режиме картинку будет видно, но она не будет мигать) Но после публикации поста все должно заработать. :)

Оба способа дают одинаковый результат, поэтому, каким пользоваться - выбирайте сами. Может быть, один из них вам понравится больше. :)

Ну и, конечно, если вы знаете другие способы создать меняющуюся картинку, тоже пишите!

На вопросы по теме с удовольствием отвечаю в комментариях. :)

Также, дорогие! Хочу обратить ваше внимание на то, что в верхнем меню моего блога появился раздел BLOG DESIGNS! Там вы сможете узнать о том, как заказать у меня дизайн блога или купить один из готовых.

Всех обнимаю! И, конечно же, до встречи на МК :))