Компьютерный форум OSzone.net  

Компьютерный форум OSzone.net (http://forum.oszone.net/index.php)
-   Вебмастеру (http://forum.oszone.net/forumdisplay.php?f=22)
-   -   [решено] Меняющаяся кнопка (http://forum.oszone.net/showthread.php?t=119593)

Карина 09-10-2008 16:51 919753
Меняющаяся кнопка
 
как запихнуть свою кнопку для сайта в программу Fronte Page? Вернее рисунок для меняющейся кнопки? Читала справку - но у себя таких опций не нашла((
Сеньку!!!!

Coutty 09-10-2008 17:24 919788
Оооо... Да кто его знает, этот FrontPage?)
Зайдите в папку, куда сохранён сайт и подмените изображение кнопки.

Карина 09-10-2008 17:31 919796
пыталась, но не могу найти папку

D_Master 09-10-2008 19:26 919887
Карина, ЕМНИП, то Мои документы\Мои веб-сайты (Мои веб/web-страницы?)

Цитата:
Цитата Карина
рисунок для меняющейся кнопки »
что вы имеете ввиду? Типа, рисунок 1, наводишь мышку - рисунок меняется на рис.2, отводишь мышку - обратно меняется на 1й? Если да, то делаем так:
Код:
<img src="1.jpg" onmouseover="this.src='2.jpg';" onmouseout="this.src='1.jpg';" />

Карина 10-10-2008 18:38 920757
D_Master, сейчас попробую объяснить наглядно в рисунках. Кнопку со второго рисунка запихнуть в обзор кнопок. Это просто фон для кнопок. Вот мой сайт http://sfinxcats.narod.ru/ (он очень банальный, я новичок) По левой стороне расположены ссылки , я хочу сделать фон у надписей. У дизайнера на сайте были эти кнопки в бесплатной раздаче, значит они как то используются? Или надпись надо делать в фотошопе...? У меня в спрвке программы есть инструкции, но в программе нет таких опций.

D_Master 10-10-2008 20:54 920819
Карина, если вы хотите сделать кнопки с надписями на фоне (рис.2.jpg), то можно сделать
Цитата:
Цитата Карина
надпись в фотошопе »
:wink:

Coutty 11-10-2008 09:21 921082
Размещайте их на слоях. Например, так:

HTML код:
<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 921303
D_Master, Я не умею. Я не дружу с фотошопом.
Coutty, я такой диллетант, что я изнасиловала уже этот код и ничего не добилась. ) Что с ним надо делать?

Coutty 12-10-2008 09:43 921633
Карина, сохраните это в html-файле:
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 923708
Coutty, Это мой сайт http://sfinxcats.narod.ru/ и мне надо сделать аналогичные надписи на данном рисунке, Дугой. Не получается.

Coutty 14-10-2008 17:38 923758
Вложений: 2
Такой вариант:
HTML код:
<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 923809
Coutty, спасибо!!!!! В фотошопе я тоже дугой не умею) Ладно , попрошу кого-нибудь.
А не понравились именно наши кошки или кошки этой породы?

Coutty 14-10-2008 20:17 923901
Вложений: 1
Прикрепляю "демку" для фотошопа. Достаточно просто изменить текст (возможно - цвет, шрифт, размер, эффекты наложения).

Мне в принципе лысые кошки и собаки не нравятся. Но я понимаю, что кому-то они по душе, т.ч. никаких претензий :)

D_Master 14-10-2008 21:03 923945
Карина, отблагодарить можно и нажатием на кнопку "Полезное сообщение" :wink:

Карина 14-10-2008 21:49 924018
Coutty, я сгорю сейчас со стыда :blush2:
Пойду поищу учебники по фотошопу. Не получается сделать дугой

Coutty, все, поняла. я просто сохранила в jpeg а в psd получается!

Карина 14-10-2008 21:58 924030
Coutty, Как закрасить фон Белый? Чтобы одна скобка осталась, один рисунок!

Coutty 14-10-2008 22:12 924042
В jpg нельзя избавиться от фона. Если хотите прозрачный фон, сохраняйте или в gif или в png. Впрочем, IE6 не понимает png с прозрачностью, поэтому лучше использовать gif (в фотошопе файл-> сохранить для web).

Карина 14-10-2008 22:25 924059
Coutty, теперь белая грязь по краям торчит.

Coutty 14-10-2008 22:34 924075
Изображение -> Режим -> Индексированные цвета.
После этого попиксельно стирается всё ненужное. Если стирать в режиме RGB, то получаются полупрозрачные области, которые при сохранении заменяются на определённый цвет (у вас белый, но можно поменять на чёрный из панельки сохранения для web).

Карина 14-10-2008 22:39 924079
У меня не активна "Сохранение для web" Неактивна опция.

Coutty 15-10-2008 08:34 924296
Как это неактивна? Должна быть активна, если изображение открыто.
Ну просто в gif сохраняйте через "Сохранить как". Только края предварительно от белых пикселов очистить надо.


Время: 00:13.

Время: 00:13.
© OSzone.net 2001-