31 May 2014

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

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

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

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


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

Прежде всего нам нужно создать два изображения одинакового размера. Лучше сразу уменьшить их до размера, нужного для размещения на панели или в сообщении. В моем случае получились две такие картинки 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! Там вы сможете узнать о том, как заказать у меня дизайн блога или купить один из готовых.

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

26 comments :

  1. Ооо, что-то новенькое! Алена, спасибо большое!!!! Интересно....

    ReplyDelete
  2. Алена, огромное спасибо тебе!

    ReplyDelete
  3. ооо спасибо большооое)
    Алена, а расскажи пожалуйста как делать так что бы при наведении мыши на значки соц. сетей они светлели?как у тебя к примеру

    ReplyDelete
    Replies
    1. Диляра, с помощью этого кода можно и осветление сделать - просто одно изображение нормального цвета, а второе более светлым сделать)

      Delete
  4. Совет - если картинки у вас одинаковые - можно при наведении сделать так, чтобы вторая картинка была ЧБ (у меня в блоге так) :)

    ReplyDelete
  5. Аленочка, спасибо! Что бы мы без тебя делали))) Спасибо за помощь в наведении красоты в наших домиках)))

    ReplyDelete
  6. Классная идея! я и не задумывалась что так можно! =)

    ReplyDelete
  7. Алёна, подскажите пожалуйста, куда обратиться. По вашему курсу не могла внести изменения в блоге. Выдаёт ошибку bX-8ymxw9 .

    ReplyDelete
  8. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Таня, вы пытались загрузить сохраненный шаблон в блог, наверное?

      Delete
    2. Уже месяца два не могу ничего изменить в блоге. Гаджеты , страницы добавить, изменить профиль. Многие кнопки прозрачны, без надписи, например "сохранить" в редакторе, но они действуют.

      Delete
  9. Алёна, спасибо огромное за полезную информацию. И самое главное что всё так же очень просто и доступно представлено для нас))).

    ReplyDelete
  10. Круто,очень классно!спасибо,Аленочка

    ReplyDelete
  11. Как здорово!! Аленочка..спасибо тебе огромное!! Думаю обязательно пригодится..

    ReplyDelete
  12. Алёна! Не перестаёшь нас баловать и удивлять!))) Спасибо!!)))

    ReplyDelete
  13. Алена, спасибо! Сколько же ты секретов знаешь! И как преобразилась блогосфера благодаря твоим курсам!
    А можно вопрос не по теме? Я состою в нескольких блогах и хочу чтоб об этом знала только я. Чтоб в профиле отражалась только ссылка на мой постоянный блог. проштудировала все уроки.. вот видела где-то об этом информацию, но так не нашла ее. Помоги, пожалуйста)

    ReplyDelete
  14. Как интересно! Спасибо большое, Алена ;)
    Думаю, обязательно пригодится))

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
    Replies
    1. Правой кнопкой мыши на изображение - Копировать адрес изображения или Копировать URL изображения )

      Delete
  16. так интересно...
    буду изучать)))

    ReplyDelete
  17. Алёна, хочу выразить тебе огромную благодарность! Спасибо за те уроки, что ты дала. Я давно мечтала оформить свой блог "под себя", но не знала много того, чем у научилась у тебя. Да и вообще, твои статьи стали каким-то толчком к действиям.
    Я бы хотела показать, что получилось у меня. Если у тебя будет минутка и ты сможешь заглянуть в мой блог о вязании http://oglezneva.blogspot.ru/, то ябуду очень тебе рада. Кстати, в последнем своем посте я как раз использовала прием из этого урока со сменяющейся картинкой - там можно увидеть мой блог до и после преображений.

    ReplyDelete
  18. Алёна, спасибо большое за уроки!!! Благодаря им оформила дизайн моего нового блога!

    ReplyDelete
  19. Алена, огромное спасибо за такое количество ценной, да еще и бесплатной информации!) Буду пробовать)

    ReplyDelete