Как создать свою активную кнопку. Такую же, как была у Гены для подключения к Инету, но со своей картинкой:

1. Открываем картинку с помощью проги Adobe ImageReady (CS2)

2. Берём инструмент "Выделение Фрагмента"

3. Выделяем нужные нам области, а именно:

1) Верхняя (до кнопки)

2) Левая (левее кнопки)

3) Кнопка (сама кнопка)

4) Правая (правее кнопки)

5) Нижняя (ниже кнопки)

!!У вас должно получиться именно !5! зон!!

4. Нажимаем ctrl+alt+p или инструмент "Просмотреть в iexplore"

5. Открывается HTML страница

6. Из html страницы сохраняем все рисунки в дирректорию "C:/wp/images/"

7. У вас получается 5(!) картинок в дирректории "C:/wp/images/"

8. Вы называете все картинки по подобию:

Верхняя картинка - des_01.jpg

Левая картинка - des_02.jpg

Картинка с кнопкой - des_03.jpg

Правая картинка - des_04.jpg

Нижняя картинка - des_05.jpg

9. Создаёте в папке "C:/wp/" TXT файл с названием "Mydesktop.txt"

10. В TXT файле "Mydesktop.txt" пишите:

<html>
<head>
<title>
Кнопка
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body marginheight="0" topmargin="0" leftmargin="0" marginwidth="0" BGCOLOR="#000000">
<table width="W1" height="H1" border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="C:/wp/images/des_01.jpg" width="W1" height="H1">
</td></tr></table>
<table width="W1" height="H2" border="0" cellpadding="0" cellspacing="0">
<tr><td width="W2" height="H2">
<img src="C:/wp/images/des_02.jpg" width="W2" height="H2"></td>
<td width="W3" height="H2">
<a onmouseover="document.h.src='C:/wp/images/des_03-over.jpg';
"onmouseout="document.h.src='C:/wp/images/des_03.jpg';
"onmousedown="document.h.src='C:/wp/images/des_03-down.jpg';
"href="http://www.hottabych.net">
<img src="C:/wp/images/des_03.jpg" name="h" border="0"></a></td>
<td width="W4" height="H2">
<img src="C:/wp/images/des_04.jpg" width="W4" height="H2">
</td></tr></table>
<table width="W1" height="H5" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img src="C:/wp/images/des_05.jpg" width="W1" height="H5">
</td></tr></table>
</body></html>

11. Меняем в нашем TXT файле слова по такой схеме:
W1 на ширину вашего верхнего рисунка
W2 на ширину вашего левого рисунка
W3 на ширину вашего рисунка с кнопкой
W4 на ширину вашего левого рисунка

H1 на высоту вашего верхнего рисунка
H2 на высоту вашего левого рисунка
H5 на высоту вашего нижнего рисунка

12. Отлично, теперь нужно создать саму кнопку:

1) копируем файл "des_03.jpg" два раза в ту же папку и называем их "des_03-over.jpg" и "des_03-down.jpg".

2) в картинке "des_03-over.jpg" применяете любые фильтры, эта картинка будет высвечиваться когда вы будете наводить курсор на кнопку.

3) в картинке "des_03-down.jpg" применяете любые фильтры, эта картинка будет высвечиваться когда вы будете нажимать на кнопку.

13. Меняете название "mydesktop.txt" на "mydesktop.htm".

14. Если у вас поползли картинки, отредактируйте код файла mydesktop.htm так, чтоб весь код начиная с "<table width..." был написан в одну строчку.

Всё, теперь у вас раб. стол как и раб. стол Гены! Только называется он теперь mydesktop.htm!

Автор: Никита

Ссылки по теме:

• Комментарии по этой статье на форуме
• Рабочий стол Гены
• Обои

Обсудить на форуме | Рекомендовать другу