VPF::События в DIV'е - Форум программистов

DEER

Дата 10.4.2006, 09:09 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

вот делаю кнопочку

Код


<DIV style='background-Color:#248CA2'
onmouseup="this.style.backgroundColor='#309FB7';" 
onselectstart="return false;" 
onmousedown="this.style.backgroundColor='#14798F';" 
onmouseover="this.style.backgroundColor='#309FB7';" 
onmouseout="this.style.backgroundColor='#248CA2';">Страницы</DIV>

у меня возникли кое какие проблемы:
IE: все события возникают когда мышка наводится именно на текст внутри дива, а не на саму область. Эт этого можно избавиться? А то ведь ещё писать onclick, хотелось бы чтобы он срабатывал на всю обасть "кнопки"
FF, Opera: события нормально работают, только подсмотренное в MSDN свойство onselectstart по ходу только для IE, хотелось бы узнать, как запретить выделение надписи в div'е. а то некрасиво смотрится, когда нажимаешь на кнопку, а в ответ текст подсвечивается, а в опере даже выскакивает менюшка аля "копировать и т.п."

--------------------

Illuminaty

Дата 10.4.2006, 09:16 (ссылка)

(нет голосов)

Загрузка ...

/*Антон Захаров*/

Профиль
Группа: Комодератор
Сообщений: 1238
Регистрация: 19.3.2005
Где: Россия, Казань

Репутация: 4
Всего: 56

IE 6. Все нормально. (по первому пункту)

DEER

Дата 10.4.2006, 09:19 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

посмотри плиз
вот сдесь

--------------------

Ciber SLasH

Дата 10.4.2006, 09:39 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

DEER, не верный подход.
Вот тебе тоже самое, но гораздо удобнее:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type='text/css'>
a {
    width: 100px;
    height: 20px;
    padding: 5px;
    display: block;
    text-align: center;
    text-decoration: none;
    background: #248CA2;
}
a:link, a:visited {color: black}
a:hover, a:active {background: #309FB7}
</style>
</head>

<body bgColor="#7FB8D8">
<a href='#'>Test</a>
</body>
</html>

DEER

Дата 10.4.2006, 10:07 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

что то не вдохновило. после нажатия на кнопку она "теряет свои свойства"

--------------------

Ciber SLasH

Дата 10.4.2006, 10:15 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Какие свойства?

DEER

Дата 10.4.2006, 10:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

нуу, что когда мышкой наводишь, она цвет меняет....

--------------------

12345c

Дата 10.4.2006, 14:47 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

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

Код


<div style=padding:16;width:30;background-color:wheat;cursor:hand;cursor:pointer;>***</div>

--------------------

Google Code Playground - онлайн-отладка своих примеров HTML+JS без регистрации, с сохранением по URL, без кириллицы. Go

DEER

Дата 10.4.2006, 16:17 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

12345c, поставил в css width:130px; для класса кнопочек, помогло, теперь срабатывает для всего div'а smile

а в чем прикол так и не понял. Из за чего это???

на всякий клучай вот класс

Код

.menu_button {
width:130px;
PADDING-RIGHT: 6px; 
PADDING-LEFT: 6px; 
PADDING-BOTTOM: 6px; 
MARGIN: 5px; 
CURSOR: pointer; 
LINE-HEIGHT: 120%; 
PADDING-TOP: 6px; 
FONT-FAMILY: Times New Roman, Helvetica, sans-serif; 
BACKGROUND-COLOR: #248ca2
}

Добавлено @ 16:18
ещё на всякий случай, доктупе такой

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

--------------------

12345c

Дата 10.4.2006, 17:04 (ссылка)

(нет голосов)

Загрузка ...

Круглый

Профиль
Группа: Vingrad developer
Сообщений: 2018
Регистрация: 26.12.2005
Где: наша не пропадала ?

Репутация: 57
Всего: 101

Чувствительная область - та, размеры для которой назначишь. Padding относится к области, margin, например, нет. Отсутствие width должно значить 100%, непонятно, почему это вызвало проблемы. (Может, потому что нужен был бордюр в виде padding?)

Ciber SLasH

Дата 10.4.2006, 23:08 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Участник Клуба
Сообщений: 1813
Регистрация: 9.11.2004
Где: С.-Петербург

Репутация: 24
Всего: 67

Цитата(DEER @ 10.4.2006, 11:28

)

нуу, что когда мышкой наводишь, она цвет меняет....

Понял, тогда так:

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type='text/javascript'>
function bg(obj, color) {
    obj.style.backgroundColor = color;
}
</script>
<style type='text/css'>
a {
    width: 100px;
    height: 20px;
    padding: 5px;
    display: block;
    text-align: center;
    text-decoration: none;
    background: #248CA2;
}
a:link, a:visited {color: black}
</style>
</head>
<body bgColor="#7FB8D8">
<a href='#' onMouseOver='bg(this,"#309FB7")' onMouseOut='bg(this,"#248CA2")' onMouseDown='bg(this,"#14798F")' onMouseUp='bg(this,"#309FB7")' onFocus='this.blur()'>Test</a>
</body>
</html>

DEER

Дата 11.4.2006, 08:48 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 749
Регистрация: 12.4.2005
Где: г. Рязань

Репутация: 2
Всего: 13

12345c, "бордюр в виде padding" как был так и остался 6px. В стиль добавил только width.
Ciber SLasH, спасибо за старания, всё равно буду юзать div'ы smile

По второму вопросу о выделении текста: фиг с ним smile

. Только додумался, что юзер не сможет сидеть и кликать по кнопке по нескольку раз, нажал и страница перегружается smile

--------------------

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »