[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Команда в картинке
=l=e=x=
Есть картинка, при наведении меняется на другую
CSS
	
a.knopka {
display:block;
background-image: url(images/racktiv.png);
position:absolute;
width:100px;
height:197px;
left:51.9%;
top:377px;
}
a.knopka:hover {
display:block;
background-image: url(images/racktiv2.png);
position:absolute;
width:100px;
height:197px;
left:51.9%;
top:377px;
}


Вывод картинки на странице
<a class="knopka"></a>

Мне нужно объединить данную картинку с такой функцией (кнопкой подтверждения)
<input type='submit' value='подтвердить'>

Помогите пожалуйста, а то уже все перепробывал...



Спустя 5 минут, 48 секунд (21.03.2011 - 14:57) sergeiss написал(а):
А что ты хочешь в итоге: чтобы картинка была кнопкой?

И что именно перепробовал-то? Покажи тут код, подумаем вместе.


Спустя 2 минуты, 52 секунды (21.03.2011 - 15:00) inpost написал(а):
=l=e=x=
<input type="submit" class="knopka">
Ей теперь различные стили давай, как для a

Спустя 3 минуты, 8 секунд (21.03.2011 - 15:03) =l=e=x= написал(а):
Да нужно чтобы картинка была кнопкой (подверждения).
Перепробывал вот что:
добавлял - type='submit' в <a class="knopka"> менял местами, добавлял, удалял, ну и тд.
Получалось что работает, но берется в рамку и появляется надпись,
пробывал поменять через css стиль (кнопки), но без результатно.
Знаю что можно через js, но самого скрипта не нашел...

Спустя 7 минут, 3 секунды (21.03.2011 - 15:10) sergeiss написал(а):
Так ты уж определись, что тебе надо: надпись или картинку на кнопке smile.gif Если картинку надо, то value убери. Тогда надписи не будет.

Спустя 2 минуты, 23 секунды (21.03.2011 - 15:12) =l=e=x= написал(а):
Мне нужна картинка-кнопка с функцией подверждения, вот как это сделать, хз???

По стандарту value=подвердить, если я его удаляю, браузер сам автоматом выводит -отправить запрос...

Спустя 7 минут, 47 секунд (21.03.2011 - 15:20) sergeiss написал(а):
А ты не удаляй value полностью, а пропиши пустой: value="". Тогда не будет никаких дефолтных надписей для сабмита.

Спустя 9 минут, 50 секунд (21.03.2011 - 15:30) =l=e=x= написал(а):
Вот что выходит, вся картинка берется в рамку с серым фоном...
Если удалить стиль для value, то рамка белая вместо серой, а так все тоже самое.

Спустя 56 минут, 12 секунд (21.03.2011 - 16:26) fallow написал(а):
<input type="image" src="../../images/button.png" value=""/>

Спустя 1 минута, 5 секунд (21.03.2011 - 16:27) inpost написал(а):
=l=e=x=
border:0 - убираешь рамку. Применяешь нужные стили - рамки нет.

fallow
Не советуй пакости, ты знаешь, сколько проблем потом с этим image будет у автора? Реализовывать надо через стиль для type="submit", если хочешь уметь правильно верстать, а не через задницу.

Спустя 15 минут, 18 секунд (21.03.2011 - 16:42) fallow написал(а):
inpost
=) Я больше не буду rolleyes.gif

Спустя 4 минуты, 51 секунда (21.03.2011 - 16:47) sergeiss написал(а):
Цитата (inpost @ 21.03.2011 - 17:27)
Не советуй пакости, ты знаешь, сколько проблем потом с этим image будет у автора?

Кстати говоря, тот вариант тоже возможен smile.gif И позволяет реализовать некоторые фичи, коих просто нету у простого сабмита. Так что в данном случае я бы не был столь категоричен.

Спустя 17 минут, 18 секунд (21.03.2011 - 17:04) =l=e=x= написал(а):
Рамку и фон для input я убрал, но а остальные кнопки вообще не смотрятся без рамки о фона, т. е. не понятно куда данные вводить...
Значит тоже не выход...

Может быть можно как нить через фрейм или js?

Спустя 19 минут (21.03.2011 - 17:23) sergeiss написал(а):
Цитата (=l=e=x= @ 21.03.2011 - 18:04)
Рамку и фон для input я убрал, но а остальные кнопки вообще не смотрятся без рамки о фона, т. е. не понятно куда данные вводить...
Значит тоже не выход...

Может быть можно как нить через фрейм или js?

Ну так ты нарисуй хорошую картинку, чтобы было понятно, что это кнопка smile.gif И при чем в данном случае "фрейм или js"?

Спустя 9 минут, 8 секунд (21.03.2011 - 17:33) =l=e=x= написал(а):
Я так и поступил нарисовал отдельную кнопку...

Спустя 1 час, 27 минут, 36 секунд (21.03.2011 - 19:00) sergeiss написал(а):
=l=e=x=
а если ты сделаешь то, что было предложено в этой же теме
Цитата (fallow @ 21.03.2011 - 17:26)
<input type="image" src="../../images/button.png" value=""/>

то ты сможешь получить координаты точки клика. Типа такого кода проверь, только свой файл укажи с картинкой:
<form action="" method="post">
<input
type="image" src="../pictures/P2050069.png" value="" />
</form>
<?php

if( count( $_POST ) > 0 )
{
echo '<pre>';
var_dump( $_POST );
echo '</pre>';

}
?>

Кликаешь на картинку, видишь, где нажато было. Это тоже можно использовать в определенных случаях.

Спустя 1 час, 52 минуты (21.03.2011 - 20:52) inpost написал(а):
sergeiss
Помогает реализовать, но передаёт лишние данные. Зачем заниматься заведомо неправильными вещами, когда куда эфективнее раз и на всегда научить человека верстать через сабмиты, чем завтра появится с вопросами о картинках.
Я считаю, что всему должно быть своё место, так и image настолько уникальный и редкий, что не стоит его рассматривать как таковой, ведь тут даже разные передачи идут в зависимости от браузера, что ставит под сомнение его эфективность на фоне обычного submit.

Спустя 45 минут, 39 секунд (21.03.2011 - 21:38) sergeiss написал(а):
inpost - а почему это "лишние" данные? Ты же заранее не знаешь, что там за картинка... Может быть, человеку надо реализовать что-то, где важно место нажатия мыши на картинке, при этом он не может использовать MAP. Например потому, что для него значима каждая точка рисунка. Может быть так? Может.
Вот и пусть сразу же знает, что возможны разные варианты. А придет с вопросами... Если умные вопросы, так и ответим smile.gif

Спустя 16 часов, 45 минут, 47 секунд (22.03.2011 - 14:24) =l=e=x= написал(а):
Мне бы это помогло, но ведь я писал, что кнопка при наведении меняется, а если ставить этот скрипт, то она становится статичная...
Статичная ладно, рамка появляется, убирать ее нельзя, так как другие кнопки неувидишь.

Вот этот класс - class='knopka'
В эту функцию - <input type='submit' value='подтвердить'>

Так и не разобрался, готовое решение видел, но сам сделать не смог.

Спустя 20 часов, 1 минута, 58 секунд (23.03.2011 - 10:26) killer8080 написал(а):
Цитата (=l=e=x= @ 22.03.2011 - 13:24)
Статичная ладно, рамка появляется, убирать ее нельзя, так как другие кнопки неувидишь.

С чего это? А классы на что?
Кстати грузить отдельные картинки для разных состояний, не есть гуд! Оптимально делать на спрайтах.

Спустя 54 минуты, 56 секунд (23.03.2011 - 11:21) =l=e=x= написал(а):
Вообщем не стал заморачиваться, сделал картинку статичной
Вывод изображения:
<input type='submit' value='' class="knopka">

Css изображения
	
input.knopka {
display:block;
background-image: url(images/racktiv2.png);
position:absolute;
width:104px;
height:104px;
left:51.9%;
top:111px;
border: 0px;
}

Вывод input:
<input type='submit' value='' class="st">

Css input:
.st
{
FONT-SIZE: 8pt;
FONT-FAMILY: Verdana, Helvetica;
border: 1px solid silver;
color: #606060;
background-color: #222222;
}

Теперь все работает корректно...

Спустя 50 минут, 35 секунд (23.03.2011 - 12:11) killer8080 написал(а):
Какой то бред, зачем в одной форме два сабмита?
Все решается с помощью css, зачем такие извращения.

Спустя 19 минут, 45 секунд (23.03.2011 - 12:31) =l=e=x= написал(а):
Да потому, что, если все делать только для input - картинка берется в рамку, если рамку убрать - то остальные кнопки пропадают, вот поэтому такая и заморочка.
Если знаешь как то подругому, напиши, в чем проблема...

Спустя 4 часа, 32 минуты, 26 секунд (23.03.2011 - 17:03) killer8080 написал(а):
Цитата (=l=e=x= @ 23.03.2011 - 11:31)
Да потому, что, если все делать только для input - картинка берется в рамку, если рамку убрать - то остальные кнопки пропадают, вот поэтому такая и заморочка.

Причём тут остальные инпуты? Кнопке нужно присвоить индивидуальный класс или id, им и манипулировать. Например так:
HTML
<input type="submit" class="knopka" value="Отправить" />


CSS
.knopka{
width: 100px;
height: 197px;
background: url(/images/background.jpg) #999 no-repeat left top;
border: none;
}

.knopka:hover {
background-position: left -197px;
}


PS в этом варианте из двух картинок делаем спрайт (одна большая картинка грузится быстрее чем 2 маленьких). Вместо #999 нужно задать цвет в общей цветовой гамме дизайна, чтобы кнопка была похожа на кнопку при отключенной графике или вовремя загрузки контента.
делать display:block для инпута не надо, он и так по умолчанию блочный. И position:absolute зачем?

Спустя 27 минут, 32 секунды (23.03.2011 - 17:31) =l=e=x= написал(а):
Спасибо, как раз то, что нужно.
position:absolute нужен, чтобы картинка несмещалась и была поверх остальных контейнеров...
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.