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

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

29 comments :

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

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

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

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

      Delete
  4. спасибо, полезно)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    ReplyDelete
  21. 90minup ข่าวกีฬา ฟุตบอล ผลบอล วิเคราะห์บอล พรีเมียร์ลีก ฟุตบอลไทย
    ข่าวกีฬา
    ตารางคะแนน
    ฟุตบอลไทย
    ไฮไลท์ฟุตบอล
    ดูบอลออนไลน์
    ผลบอลสด
    90minup

    ReplyDelete
  22. Slotxo บริการ สล็อตออนไลน์ สล็อตxo แจกเครดิตฟรี พร้อม ทางเข้า slotxo เกมส์ใหม่กว่า 100 เกมส์ สมัคร slotxo ได้เลยตอนนี้ บริการ 24 ชั่วโมง.
    Slotxo
    สล็อตxo
    สล็อตxo บนมือถือ
    สมัคร slotxo
    สมัคร slotxo รับโบนัสฟรี

    ReplyDelete
  23. เกมส์สล็อตออนไลน์ที่ดีที่สุด goldenslot สามารถเข้าไปร่วมสนุกกันได้ที่ ทางเข้า goldenslot

    ReplyDelete