Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > События в DIV'е

Автор: DEER 10.4.2006, 09:09

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

Код


<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

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

Автор: DEER 10.4.2006, 09:19

посмотри плиз
http://ariel.hanggliding.ru/cms/cms.htm

Автор: Ciber SLasH 10.4.2006, 09:39

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

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

Автор: Ciber SLasH 10.4.2006, 10:15

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

Автор: DEER 10.4.2006, 10:28

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

Автор: 12345c 10.4.2006, 14:47

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

Код


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

Автор: DEER 10.4.2006, 16:17

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

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

Автор: Ciber SLasH 10.4.2006, 23:08

Цитата(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

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

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

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