Web-miss: Vanessa (vensy)
Opened: 18.05.2010
Theme: Blake Lively
Orders: OPEN
Coming soon
Выберите пакет услуг *:

Ваше имя/ник *:
Ваш e-mail *:
Ссылка на ваш сайт *:
Опишите то,что хотите видеть в дизайне(блоки,шапка) *:
Ссылки на качественные фото для дизайна(по желанию):
Названия ссылок для нав. меню на лого *:
Если вам нужны доп. услуги,то перечислите какие:
Код безопасности *:

200
Главная » Статьи » Помощь с HTML,CSS и Ucoz » Изучение HTML

Смена изображений на шапке при наведении
Итак,нам понадобится следующий код:
<table border=0 cellpadding=0 cellspacing=0 width=1000>
 <img src="http://site-on-ucoz.clan.su/logo1.png"border="0" ><a href="http://verbena-studio.starszz.com/"><img src='http://site-on-ucoz.clan.su/logo2.png'
onmouseover="this.src='http://site-on-ucoz.clan.su/logo22.png'"
 
onmouseout="this.src='http://site-on-ucoz.clan.su/logo2.png'"border=0><a href="http://verbena-studio.starszz.com/?page_id=27"><img src='http://site-on-ucoz.clan.su/logo3.png'
onmouseover="this.src='http://site-on-ucoz.clan.su/logo33.png'"
 
onmouseout="this.src='http://site-on-ucoz.clan.su/logo3.png'" border=0><a href="http://verbena-studio.starszz.com/?page_id=31"><img src='http://site-on-ucoz.clan.su/logo4.png'
onmouseover="this.src='http://site-on-ucoz.clan.su/logo44.png'"
 
onmouseout="this.src='http://site-on-ucoz.clan.su/logo4.png'" border=0></a><a href="http://verbena-studio.starszz.com/?page_id=288"><img src='http://site-on-ucoz.clan.su/logo5.png'
onmouseover="this.src='http://site-on-ucoz.clan.su/logo55.png'"
 
onmouseout="this.src='http://site-on-ucoz.clan.su/logo55.png'" border=0></a><a href="http://verbena-studio.starszz.com/?page_id=51"><img src='http://site-on-ucoz.clan.su/logo6.png'
onmouseover="this.src='http://site-on-ucoz.clan.su/logo66.png'"
 
onmouseout="this.src='http://site-on-ucoz.clan.su/logo6.png'" border=0></a><a href="http://verbena-studio.starszz.com/?page_id=162"><img src='http://site-on-ucoz.clan.su/logo7.png'
onmouseover="this.src='http://site-on-ucoz.clan.su/logo77.png'"
 
onmouseout="this.src='http://site-on-ucoz.clan.su/logo7.png'" border=0></a><a href="http://verbena-studio.starszz.com/?page_id=162"><img src='http://site-on-ucoz.clan.su/logo8.png'
 onmouseover="this.src='http://site-on-ucoz.clan.su/logo88.png'"border=0></a></center></td>
 </tr>
<tr>
 <td ><img src="http://site-on-ucoz.clan.su/logo9.png"></td>
 </tr>
 </table>

Для примера я возьму новое лого с Майли Сайрус и на ней мы рассмотрим смену изображений на шапке.
1. Заходим в Гимп и открываем лого с Майли

2. Если мы посмотрим вверх Гимпа,то увидим что-то наподобие линейки с отрезками,наводим на нее курсор и опускаем вниз направляющую,как на картинке.

3. Теперь жмем Изображение-Преобразование-Гильотина,и через пару секнуд шапка будет разрезана на две части автоматически.Перейдем к меню шапки
инструментом Кадрирвание в параметрах ставим вместо 68 пикс. 63 и нажимаем Enter

4. Делаем шесть вертикальных направляющих вот так

5. И также идем в Изображение-Преобразования-Гильотина,и получаем несколько кусочков лого,сохраняем каждый из них таким образом:
logo1.png
logo2.png
.........и т.д.
И кусок шапки сохраняем как logo9.png,теперь к каждму лого добавляем мягкой кистью белый  шарик(блого цвета) и сохраняем эти лого как:
logo11.png
logo22.png
.....и т.д.
Теперь загружаем все в файловый менеджер и ставим в наш код нужные ссылки,1000-это ширина вашей шапки)
Удачи!
За код спасибо Verbena

Категория: Изучение HTML | Добавил: vensy (10/08/12) | Автор: Полина
Просмотров: 861 | Комментарии: 4 | Рейтинг: 0.0/0
Всего комментариев: 4
4 Amanda   (29/07/13 22:53)
Я немного по колдовала,  разобрала код, и вроде бы получилось. 
Огромное тебе спасибо  smile

+1   Спам
2 Sunshine   (10/08/12 19:16)
О божечки *О* Спасибо тебе огромное!)
И Verben`е!)

3 vensy   (12/08/12 16:35)
Не за что)

+1   Спам
1 Tasha   (10/08/12 14:34)
спасибочки smile

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]