ОсновноеRadiotalkПользовательское
MPCHAT - CMS хостинг чатов для профессионалов
90   •   Посмотреть все темы

Картинка как кнопка отправить

 

6703
Андрей @ZloVeЩиЙ
Вообщем смотри, твоим методом задал в стилях:
.go {
color : #E3E3E3;
background-color : #E3E3E3;
background-image : url(images/GO.gif);
width : 40px;
height : 40px;
}

Бордер и лайны поубирал, сам знаю )
Вот чего в форме входа намудрил:
<form method=post name=gochat action=index.php>

<span class="enter" style="margin-left:15px">Username</span>
<input name=nick type=text onfocus=this.value='' this.value='Ваш ник';' value='Ваш ник' class=login style="width:110px; height:16px; margin-left:5px;margin-top:22px;font-family:tahoma; font-size:9px">

<input type=submit value=' ' class="go" style="position: absolute; top: 375">

<div style="padding-left:120px;padding-top:7px;"><img src="images/Form1.gif"></div>
<span class="enter" style="margin-left:15px">Password</span>
<input name=pass type=password onfocus=this.value='' this.value='Пароль';' value='Пароль' class=password style="width:110px; height:16px; margin-left:5px; margin-top:7px; margin-right:0px;font-family:tahoma; font-size:9px">

</form>

*Саму кнопку загрузил, как видишь она обычная круглая без бордюров и прочих фиговин, а когда ставлю ей стиль появляется то что в предидущем посте выложил.

1258
Сергей @seg
ZloVeЩиЙ пишет:

Вообщем смотри, твоим методом задал в стилях:
.go {
color : #E3E3E3;
background-color : #E3E3E3;
background-image : url(images/GO.gif);
width : 40px;
height : 40px;
}

Бордер и лайны поубирал, сам знаю )
Вот чего в форме входа намудрил:
<form method=post name=gochat action=index.php>

<span class="enter" style="margin-left:15px">Username</span>
<input name=nick type=text onfocus=this.value='' this.value='Ваш ник';' value='Ваш ник' class=login style="width:110px; height:16px; margin-left:5px;margin-top:22px;font-family:tahoma; font-size:9px">

<input type=submit value=' ' class="go" style="position: absolute; top: 375">

<div style="padding-left:120px;padding-top:7px;"><img src="images/Form1.gif"></div>
<span class="enter" style="margin-left:15px">Password</span>
<input name=pass type=password onfocus=this.value='' this.value='Пароль';' value='Пароль' class=password style="width:110px; height:16px; margin-left:5px; margin-top:7px; margin-right:0px;font-family:tahoma; font-size:9px">

</form>

*Саму кнопку загрузил, как видишь она обычная круглая без бордюров и прочих фиговин, а когда ставлю ей стиль появляется то что в предидущем посте выложил.

.go {
color : #E3E3E3;
background-color : #333333;
background-image : url(https://forum.vmeste.eu/upload/2396_1233911081.gif);
background-repeat: no-repeat;
border: 0;
width : 32px;
height : 32px;
}



синее подгоняй под цвет своего фона (не кнопки, а фона на котором кнопка стоит). красное ессно цвет текста поверх кнопки, если он у тебя есть. Если текст сверху не накладываеш, пункт убери. width : 32px;
height : 32px;
они тянут место под кнопку. а не саму кнопку. Если нужна больше, в графическом редакторе сначала ее сделай 40 пмкселов, а потом место под нее задаш 40 пикселов.

Отредактировано seg - 06.02.2009
6703
Андрей @ZloVeЩиЙ
color : #E3E3E3; - это и есть цвет моего фона!
width : 32px; - зачем его убирать, я задал кнопке размер в ширину 40рх
Вообщем хз нихера так и не получилось (

1258
Сергей @seg
ZloVeЩиЙ пишет:

color : #E3E3E3; - это и есть цвет моего фона!
width : 32px; - зачем его убирать, я задал кнопке размер в ширину 40рх
Вообщем хз нихера так и не получилось (

пральна, ты задал размер кнопке 40 пикселов, а картинка осталась 34, потому она у тебя косо в кнопке стоит, а кнопка больше картинки.
у мну почему то эта кнопка нормальная.

это то что я себе поставил:

<input type=submit value=' ' class="go" title="Ввалиться в чат/И растянуть ноги,/растопырив пальцы">

.go {
background-color : #262525;
background-image : url(https://forum.vmeste.eu/upload/2396_1233911081.gif);
background-repeat: no-repeat;
border: 0;
width : 34px;
height : 34px;
}


Отредактировано seg - 07.02.2009
4619
Web3r @Web3r
<font color=gold><input type=image src=newtit/images/enter.gif border="0" class=ok></font><br><br>
Вот как у меня, может кому-нибудь пригодится...

1258
Сергей @seg
RiKoS пишет:

<font color=gold><input type=image src=newtit/images/enter.gif border="0" class=ok></font><br><br>
Вот как у меня, может кому-нибудь пригодится...

А type=submit куда тут пихнуть? как инфа отправляется? у тебя на входной кнопке так стоит? и фонты зачем тут?

Отредактировано seg - 07.02.2009
1258
Сергей @seg
ZloVeЩиЙ, кстати только ща обратил внимание, что ты z-index еще позиционируеш кнопу
<input type=submit value=' ' class="go" style="position: absolute; top: 375">

ИМХО: лучше это сделать относительным позиционированием. Относительно чего то. Допустим другой картинки, которая мертво привязана где то на странице. К примеру:

.go {
background-color : #262525;
background-image : url(https://forum.vmeste.eu/upload/2396_1233911081.gif);
background-repeat: no-repeat;
border: 0;
width : 34px;
height : 34px;
z-index: 2;
overflow: visible;
position: relative;
visibility: visible;
top: 120em;
left: 25em;
}

A какой то картинке, к которой будеш привязываться, дай класс, или ид, к примеру class="go_priviazka" и в стилях ей:

.go_priviazka {
z-index: 1;
}

Отредактировано seg - 07.02.2009
6703
Андрей @ZloVeЩиЙ
seg, спасибо тебе большое, я понял, вот оно:
background-repeat: no-repeat;
Именно вот этого мне и нехватало...

Отредактировано ZloVeЩиЙ - 07.02.2009
6703
Андрей @ZloVeЩиЙ
seg пишет:

ИМХО: лучше это сделать относительным позиционированием...

Я с позиционированием еще не сталкивался, и не работал до этого, вроде бы и сейчас не плохо смотрится, во всех браузерах проверил...
Оставлю пока как есть!

1258
Сергей @seg
ZloVeЩиЙ пишет:

seg пишет:

ИМХО: лучше это сделать относительным позиционированием...

Я с позиционированием еще не сталкивался, и не работал до этого, вроде бы и сейчас не плохо смотрится, во всех браузерах проверил...
Оставлю пока как есть!

Браузеры понятно, а разрешения экрана? а размеры и типы экранов? на маленьком широкоэкранном ноутбуке так же смотриться? как на мониторе 19 дюймов 4х3 ? Проверил? Лучше в em делай Мона конечно и в пикселах, но возможны нюансы.

Отредактировано seg - 07.02.2009
6703
Андрей @ZloVeЩиЙ
Что такое em, можно подробней!?

1258
Сергей @seg
ZloVeЩиЙ пишет:

Что такое em, можно подробней!?

По идее это размер шрифта pt,px,%,mm,cm, in,pic,ems,exs.
Но и в позиционировании используются те же величины. em это ems

**********

Можеш глянуть у меня на сайте в em спозиционирован поиск яндекса в шапке . На всех экранах висит одинаково

И скай программу Adobe Dreamweaver CS3 она русская, и в ней это все просто делается, правда когда разберешся ))

Скачать тоже у меня на сайте мона, на форуме поищи.

Отредактировано seg - 07.02.2009
6703
Андрей @ZloVeЩиЙ
А каким образом тогда можно, несколько обьяектов отпозиционирывать, например:
<img src="images/text_f3.gif" align="absmiddle" style="margin-left:240px;margin-top:20px;">
<input type="text" style="width:150px; height:16px; margin-left:8px;margin-top:20px;font-family:tahoma; font-size:9px"><img src="images/B-f.gif" align="absmiddle" style="margin-left:10px;margin-top:20px;">

Разве что через див, предворитильно, задав клас или ид!?

Отредактировано ZloVeЩиЙ - 07.02.2009
1258
Сергей @seg
ZloVeЩиЙ пишет:

А каким образом тогда можно, несколько обьяектов отпозиционирывать, например:
<img src="images/text_f3.gif" align="absmiddle" style="margin-left:240px;margin-top:20px;">
<input type="text" style="width:150px; height:16px; margin-left:8px;margin-top:20px;font-family:tahoma; font-size:9px"><img src="images/B-f.gif" align="absmiddle" style="margin-left:10px;margin-top:20px;">

Разве что через див, предворитильно, задав клас или ид!?

да, классами и идами, смотри что я выше сделал z-index, добавляй просто z-index 3,4,5,6,...
.1 {
z-index: 3;
}

.2 {
z-index: 4;
}

и т.д. и описывай их: видимость, переполнение, позиция цвет бакграунд и т.д.

Ночью, если не забуду сделаю описалово по теме z-index

Отредактировано seg - 07.02.2009
6703
Андрей @ZloVeЩиЙ
Еще раз благодарю, буду тестировать )

6703
Андрей @ZloVeЩиЙ
Можно ли как то onmous"ы в цсс засунуть!?
<a href="http://mpchat.com" title="Описание"><img src="http://mpchat.com/blank/index/img/lan/en.gif" id="отправить" value=Отправить onmouseout="this.src='http://mpchat.com/blank/index/img/lan/de.gif'" onmouseover="this.src='http://mpchat.com/blank/index/img/lan/ru.gif'"></a>

1258
Сергей @seg
ZloVeЩиЙ пишет:

Можно ли как то onmous"ы в цсс засунуть!?
<a href="http://mpchat.com" title="Описание"><img src="http://mpchat.com/blank/index/img/lan/en.gif" id="отправить" value=Отправить onmouseout="this.src='http://mpchat.com/blank/index/img/lan/de.gif'" onmouseover="this.src='http://mpchat.com/blank/index/img/lan/ru.gif'"></a>


a.mainlevel {

background-color: #333333;
}

a.mainlevel:hover {

background-color: #666666;
}

mainlevel- это класс, a- это ссылка , hover- наведение мыши. Отсюда пляши и описывай события.

В твоем случае

a#отправить {

background-image:url(адрес картинки.gif);
}

a#отправить:hover {

background-image:url(адрес картинки2.gif);
}

Отредактировано seg - 28.02.2009
6703
Андрей @ZloVeЩиЙ
Вопрос по сложнее, как тогда батону приписать такой стиль?
Сама кнопка
<input type=submit value=' ' class="go">

Стиль "го"
.go {
background-color : #262525;
background-image : url(http://...);
background-repeat: no-repeat;
border: 0;
width : 34px;
height : 34px;
}

Отредактировано ZloVeЩиЙ - 28.02.2009
1258
Сергей @seg
ZloVeЩиЙ пишет:

Вопрос по сложнее, как тогда батону приписать такой стиль?
Сама кнопка
<input type=submit value=' ' class="go">

Стиль "го"
.go {
background-color : #262525;
background-image : url(http://...);
background-repeat: no-repeat;
border: 0;
width : 34px;
height : 34px;
}

Аналогично гоу хоувер .go:hover

Отредактировано seg - 28.02.2009
6703
Андрей @ZloVeЩиЙ
тоесть?
.go {
background-color : #262525;
background-image : url(http://...1.гиф);
background-repeat: no-repeat;
border: 0;
width : 34px;
height : 34px;
}
.go:hover {
background-color : #262525;
background-image : url(http://...2.гиф);
background-repeat: no-repeat;
border: 0;
width : 34px;
height : 34px;
}