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
<input type="submit" class="knopka">
Ей теперь различные стили давай, как для a
Спустя 3 минуты, 8 секунд (21.03.2011 - 15:03) =l=e=x= написал(а):
Да нужно чтобы картинка была кнопкой (подверждения).
Перепробывал вот что:
добавлял - type='submit' в <a class="knopka"> менял местами, добавлял, удалял, ну и тд.
Получалось что работает, но берется в рамку и появляется надпись,
пробывал поменять через css стиль (кнопки), но без результатно.
Знаю что можно через js, но самого скрипта не нашел...
Перепробывал вот что:
добавлял - type='submit' в <a class="knopka"> менял местами, добавлял, удалял, ну и тд.
Получалось что работает, но берется в рамку и появляется надпись,
пробывал поменять через css стиль (кнопки), но без результатно.
Знаю что можно через js, но самого скрипта не нашел...
Спустя 7 минут, 3 секунды (21.03.2011 - 15:10) sergeiss написал(а):
Так ты уж определись, что тебе надо: надпись или картинку на кнопке Если картинку надо, то value убери. Тогда надписи не будет.
Спустя 2 минуты, 23 секунды (21.03.2011 - 15:12) =l=e=x= написал(а):
Мне нужна картинка-кнопка с функцией подверждения, вот как это сделать, хз???
По стандарту value=подвердить, если я его удаляю, браузер сам автоматом выводит -отправить запрос...
По стандарту value=подвердить, если я его удаляю, браузер сам автоматом выводит -отправить запрос...
Спустя 7 минут, 47 секунд (21.03.2011 - 15:20) sergeiss написал(а):
А ты не удаляй value полностью, а пропиши пустой: value="". Тогда не будет никаких дефолтных надписей для сабмита.
Спустя 9 минут, 50 секунд (21.03.2011 - 15:30) =l=e=x= написал(а):
Вот что выходит, вся картинка берется в рамку с серым фоном...
Если удалить стиль для value, то рамка белая вместо серой, а так все тоже самое.
Если удалить стиль для 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", если хочешь уметь правильно верстать, а не через задницу.
border:0 - убираешь рамку. Применяешь нужные стили - рамки нет.
fallow
Не советуй пакости, ты знаешь, сколько проблем потом с этим image будет у автора? Реализовывать надо через стиль для type="submit", если хочешь уметь правильно верстать, а не через задницу.
Спустя 15 минут, 18 секунд (21.03.2011 - 16:42) fallow написал(а):
inpost
=) Я больше не буду
=) Я больше не буду
Спустя 4 минуты, 51 секунда (21.03.2011 - 16:47) sergeiss написал(а):
Цитата (inpost @ 21.03.2011 - 17:27) |
Не советуй пакости, ты знаешь, сколько проблем потом с этим image будет у автора? |
Кстати говоря, тот вариант тоже возможен И позволяет реализовать некоторые фичи, коих просто нету у простого сабмита. Так что в данном случае я бы не был столь категоричен.
Спустя 17 минут, 18 секунд (21.03.2011 - 17:04) =l=e=x= написал(а):
Рамку и фон для input я убрал, но а остальные кнопки вообще не смотрятся без рамки о фона, т. е. не понятно куда данные вводить...
Значит тоже не выход...
Может быть можно как нить через фрейм или js?
Значит тоже не выход...
Может быть можно как нить через фрейм или js?
Спустя 19 минут (21.03.2011 - 17:23) sergeiss написал(а):
Цитата (=l=e=x= @ 21.03.2011 - 18:04) |
Рамку и фон для input я убрал, но а остальные кнопки вообще не смотрятся без рамки о фона, т. е. не понятно куда данные вводить... Значит тоже не выход... Может быть можно как нить через фрейм или js? |
Ну так ты нарисуй хорошую картинку, чтобы было понятно, что это кнопка И при чем в данном случае "фрейм или 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.
Помогает реализовать, но передаёт лишние данные. Зачем заниматься заведомо неправильными вещами, когда куда эфективнее раз и на всегда научить человека верстать через сабмиты, чем завтра появится с вопросами о картинках.
Я считаю, что всему должно быть своё место, так и image настолько уникальный и редкий, что не стоит его рассматривать как таковой, ведь тут даже разные передачи идут в зависимости от браузера, что ставит под сомнение его эфективность на фоне обычного submit.
Спустя 45 минут, 39 секунд (21.03.2011 - 21:38) sergeiss написал(а):
inpost - а почему это "лишние" данные? Ты же заранее не знаешь, что там за картинка... Может быть, человеку надо реализовать что-то, где важно место нажатия мыши на картинке, при этом он не может использовать MAP. Например потому, что для него значима каждая точка рисунка. Может быть так? Может.
Вот и пусть сразу же знает, что возможны разные варианты. А придет с вопросами... Если умные вопросы, так и ответим
Вот и пусть сразу же знает, что возможны разные варианты. А придет с вопросами... Если умные вопросы, так и ответим
Спустя 16 часов, 45 минут, 47 секунд (22.03.2011 - 14:24) =l=e=x= написал(а):
Мне бы это помогло, но ведь я писал, что кнопка при наведении меняется, а если ставить этот скрипт, то она становится статичная...
Статичная ладно, рамка появляется, убирать ее нельзя, так как другие кнопки неувидишь.
Вот этот класс - class='knopka'
В эту функцию - <input type='submit' value='подтвердить'>
Так и не разобрался, готовое решение видел, но сам сделать не смог.
Статичная ладно, рамка появляется, убирать ее нельзя, так как другие кнопки неувидишь.
Вот этот класс - 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= написал(а):
Вообщем не стал заморачиваться, сделал картинку статичной
Вывод изображения:
Css изображения
Вывод input:
Css input:
Теперь все работает корректно...
Вывод изображения:
<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, зачем такие извращения.
Все решается с помощью 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 нужен, чтобы картинка несмещалась и была поверх остальных контейнеров...
position:absolute нужен, чтобы картинка несмещалась и была поверх остальных контейнеров...