Войти

Показать полную графическую версию : [решено] Меняющаяся кнопка

Страниц : [1] 2
Карина
09-10-2008, 16:51
как запихнуть свою кнопку для сайта в программу Fronte Page? Вернее рисунок для меняющейся кнопки? Читала справку - но у себя таких опций не нашла((
Сеньку!!!!
Coutty
09-10-2008, 17:24
Оооо... Да кто его знает, этот FrontPage?)
Зайдите в папку, куда сохранён сайт и подмените изображение кнопки.
Карина
09-10-2008, 17:31
пыталась, но не могу найти папку
D_Master
09-10-2008, 19:26
Карина, ЕМНИП, то Мои документы\Мои веб-сайты (Мои веб/web-страницы?)

рисунок для меняющейся кнопки »
что вы имеете ввиду? Типа, рисунок 1, наводишь мышку - рисунок меняется на рис.2, отводишь мышку - обратно меняется на 1й? Если да, то делаем так:
<img src="1.jpg" onmouseover="this.src='2.jpg';" onmouseout="this.src='1.jpg';" />
Карина
10-10-2008, 18:38
D_Master, сейчас попробую объяснить наглядно в рисунках. Кнопку со второго рисунка запихнуть в обзор кнопок. Это просто фон для кнопок. Вот мой сайт http://sfinxcats.narod.ru/ (он очень банальный, я новичок) По левой стороне расположены ссылки , я хочу сделать фон у надписей. У дизайнера на сайте были эти кнопки в бесплатной раздаче, значит они как то используются? Или надпись надо делать в фотошопе...? У меня в спрвке программы есть инструкции, но в программе нет таких опций.
D_Master
10-10-2008, 20:54
Карина, если вы хотите сделать кнопки с надписями на фоне (рис.2.jpg), то можно сделать надпись в фотошопе »
:wink:
Coutty
11-10-2008, 09:21
Размещайте их на слоях. Например, так:

<img src='background.jpg' style='position:absolute; top:100; left:100; z-index:1' /><div style='position:absolute; top:100; left:100; z-index:2'>Текст поверх картинки</div>
Карина
11-10-2008, 18:23
D_Master, Я не умею. Я не дружу с фотошопом.
Coutty, я такой диллетант, что я изнасиловала уже этот код и ничего не добилась. ) Что с ним надо делать?
Coutty
12-10-2008, 09:43
Карина, сохраните это в html-файле:

<html>
<head>
<title>Заголовок</title>
<style>
div#nav a {
font-weight:bold;
font-size:40;
text-align:center;
background-image:url('1.jpg');
width:200;
height:50;
display:block;
text-decoration:none;
color:black
}

div#nav a:hover {
background-image:url('2.jpg');
color:white;
}
</style>
</head>

<body>
<div id='nav' style="top:100; left:100">
<a href='link1.html'>Ссылка 1</a>
<a href='link2.html'>Ссылка 2</a>
<a href='link3.html'>Ссылка 3</a>
<a href='link4.html'>Ссылка 4</a>
<a href='link5.html'>Ссылка 5</a>
<a href='link6.html'>Ссылка 6</a>
</div>
</body>
</html>

1.jpg и 2.jpg - картинки размером 200х50 в той же папке, что и html-файл.
Работает даже в Internet Explorer 6 :)

(Да, я немного изменил то, что предложил изначально. Потому что это более простой вариант)
Карина
14-10-2008, 16:39
Coutty, Это мой сайт http://sfinxcats.narod.ru/ и мне надо сделать аналогичные надписи на данном рисунке, Дугой. Не получается.
Coutty
14-10-2008, 17:38
Такой вариант:
<html>
<head>
<title>Заголовок</title>
<style>
a {
font-weight:bold;
font-size:20;
text-decoration:none;
color:white;
}

div.na {
position:absolute;.
left:10;
width:269;
height:53;
text-align:center;
background-image:url('1.gif');
}

div:hover.na {
background-image:url('2.gif');
}
</style>
</head>

<body>
<div class='na' style='top:0' onmouseover='this.style.backgroundImage="url(\"2.gif\")"' onmouseout='this.style.backgroundImage="url(\"1.gif\")"'><a href='link1.html'>О породе</a></div>
<div class='na' style='top:35' onmouseover='this.style.backgroundImage="url(\"2.gif\")"' onmouseout='this.style.backgroundImage="url(\"1.gif\")"'><a href='link2.html'>Ананас</a></div>
<div class='na' style='top:70' onmouseover='this.style.backgroundImage="url(\"2.gif\")"' onmouseout='this.style.backgroundImage="url(\"1.gif\")"'><a href='link3.html'>В добрые руки</a></div>
<div class='na' style='top:105' onmouseover='this.style.backgroundImage="url(\"2.gif\")"' onmouseout='this.style.backgroundImage="url(\"1.gif\")"'><a href='link4.html'>Horror</a></div>
<div class='na' style='top:140' onmouseover='this.style.backgroundImage="url(\"2.gif\")"' onmouseout='this.style.backgroundImage="url(\"1.gif\")"'><a href='link5.html'>Гостевая</a></div>
</body>
</html>
Если хотите шрифт дугой, то только на картинках рисовать.

А кошки мне не понравились :tomato2:
Карина
14-10-2008, 18:31
Coutty, спасибо!!!!! В фотошопе я тоже дугой не умею) Ладно , попрошу кого-нибудь.
А не понравились именно наши кошки или кошки этой породы?
Coutty
14-10-2008, 20:17
Прикрепляю "демку" для фотошопа. Достаточно просто изменить текст (возможно - цвет, шрифт, размер, эффекты наложения).

Мне в принципе лысые кошки и собаки не нравятся. Но я понимаю, что кому-то они по душе, т.ч. никаких претензий :)
D_Master
14-10-2008, 21:03
Карина, отблагодарить можно и нажатием на кнопку "Полезное сообщение" :wink:
Карина
14-10-2008, 21:49
Coutty, я сгорю сейчас со стыда :blush2:
Пойду поищу учебники по фотошопу. Не получается сделать дугой

Coutty, все, поняла. я просто сохранила в jpeg а в psd получается!
Карина
14-10-2008, 21:58
Coutty, Как закрасить фон Белый? Чтобы одна скобка осталась, один рисунок!
Coutty
14-10-2008, 22:12
В jpg нельзя избавиться от фона. Если хотите прозрачный фон, сохраняйте или в gif или в png. Впрочем, IE6 не понимает png с прозрачностью, поэтому лучше использовать gif (в фотошопе файл-> сохранить для web).
Карина
14-10-2008, 22:25
Coutty, теперь белая грязь по краям торчит.
Coutty
14-10-2008, 22:34
Изображение -> Режим -> Индексированные цвета.
После этого попиксельно стирается всё ненужное. Если стирать в режиме RGB, то получаются полупрозрачные области, которые при сохранении заменяются на определённый цвет (у вас белый, но можно поменять на чёрный из панельки сохранения для web).
Карина
14-10-2008, 22:39
У меня не активна "Сохранение для web" Неактивна опция.



© OSzone.net 2001-2012