Проблема с div и onmouseover

kxz8 · March 13, 2010

6 часов бился, честно, уже нет сил.

Идея - сделать меню, имеется 2 картинки, push - когда мышка над кнопкой и npush когда мышка не над кнопкой.

Требуется - меню из n пунктов, при наведении на один пункт он подсвечивается, ПОВЕРХ ФОНА КНОПКИ ТЕКСТ.

Мой код, итоговый. последний что в голвоу пришёл (помоему так нельзя, но источники противоречат)

<div style="background-image:url(npush1.png); height:35; width:200;" onmouseover="this.style.background('push.png')" onmouseout="this.style.background('npush.png')">текст на кнопке

</div>

То что жирным отмечено, работает.

Были варианты this.style.background-image('push.png'), с кавычками и без. Перепробывал реально кучу варинтов...

Java не катит...

Буду мегопризнателен если кто-нибудь поможет! Поиск юзал - не нашёл решения.

Готов даж на мобилку 30 рублей кинуть тому кто даст решение не прибегая к более трудным методам...

Если что - http://tests.star--art.ru/ здесь остаётся только вставить текст в кнопки, но как...?

Жду помощи, оч надеюсь...

-O-J-A- · March 13, 2010

Требуется - меню из n пунктов, при наведении на один пункт он подсвечивается, ПОВЕРХ ФОНА КНОПКИ ТЕКСТ.

Чтобы текс подсвечивался?

Если так то может его сделать ссылкой со стилями? Или так не катит?

kxz8 · March 13, 2010

Нет. Посмотри ссылку на сайт. Нужно как там, только чтобы на кнопках можно было текст писать!

Позиционирование по пикселям не катит... И написать текст на кнопках в фотошопе тоже)

Edited March 13, 2010 by kxz8

Garino · March 14, 2010

Делал на днях...

на основе этого кода можно сделать то, что хочешь...

только поправь для себя...

HTML

<div class="menu">
		<div class="menu_div" onmouseover="this.className='menu_div_over'" onmouseout="this.className='menu_div'" onClick="window.location='domen.html'">
			<b>
				Домены
			</b>
		</div>
		 </div>

+CSS

.menu {
	width:250px; float:left; text-align:left; padding-top:20px;
}
.menu_div {
	cursor:pointer; padding-top:5px; padding-left:20px; padding-bottom:5px; padding-right:5px; color:#544600; text-decoration:none;
}
.menu_div_over {
	cursor:pointer; background-color:#544600; color:#B5AC3B; padding-top:5px; padding-left:20px; padding-bottom:5px; padding-right:5px; text-decoration:none;
}

kxz8 · March 14, 2010

Немного не так как хотел, но всё получилось. спасибо большое!

Garino · March 14, 2010

Немного не так как хотел, но всё получилось. спасибо большое!

Продублируй свою страничку куда код вставил и поиграйся с копией... попробуй поменять по смыслу на то что хотел... может все и получится...

kxz8 · March 14, 2010

Столкнулся с ещё одной проблемой(

<div class="menu">

<div class="menu_div" unselectable="on" onmouseover="this.className='menu_div_over'" onmouseout="this.className='menu_div'" onClick="window.location="a">
<FONT SIZE="4">ТЕКСТ</FONT>
</div>

</div>

<style type="text/css">
.menu {
	width:1000px; height:35px; float:left; text-align:center;
}
.menu_div {
	margin:0 auto; width:200px; height:26px; float:left; cursor:pointer; background-image: url(npush1.png); padding-top:9px;
}
.menu_div_over {
	margin:0 auto; width:200px; height:26px; float:left; cursor:pointer; background-image: url(push1.png); padding-top:9px;
}
</style>

Не могу центрировать меню по центру. Ну никак. Пробывал 2 метода разных с инета. не катит. Где ошибка? Добавил margin:0 auto; - никак не помогает(

Edited March 14, 2010 by kxz8

rus · March 14, 2010

убери с .menu_div и .menu_div_over - float:left;

kxz8 · March 14, 2010

В этом случае блоки располагаются в столбик, а требуется в стрчоку..... не знаю как с этим бороться...

barsev · March 14, 2010

Посмотрите здесь http://htmlbook.ru/content/?id=110.

Создаете сколько вам нужно таких ссылок, помещаете их в контейнер div с высотой = высоте фоновой картинки, для ссылок задаете float:left, если нужно текст по центру- то text-align:center добавьте.

Edited March 14, 2010 by barsev

kxz8 · March 15, 2010

Большое спасибо, всё получилось, только проблемка маленькая осталась конкретно для этого случая...

http://tests.star--art.ru/

<html>
<head>
		<title></title>
</head>

<style type="text/css">
.rollover {
 background: url('npush1.png');
 display: inline-block;
 width: 200px;
 height: 35px;
 text-align:center;
 text-decoration:none;
 font-size:16pt;
}
.rollover:hover {
 background: url('push1.png');
}
.contein {
 width:1000; height:35; 
}
</style>
</head>
<body>
<div class="contein" align="center">
<a href="#" class="rollover">ТЕКСТ</a>
<a href="#" class="rollover">ТЕКСТ</a>
<a href="#" class="rollover">ТЕКСТ</a>
</div>
</body>
</html>

Не могу выровнять текст по центру кнопки, text-align:center и padding-top не помогли... Что можно ещё попробывать?

Great Rash · March 15, 2010

А у меня по центру.

kxz8 · March 15, 2010

Забыл уточнить - по центру-вертикали!

kxz8 · March 15, 2010

Сделал, но проблема - меню анимируютсе в опере. но не анимируется в файрфокс, что именно может не переварвиать лиса?

http://tests.star--art.ru/

<html>

<head>
  <title></title>

</head>

<style type="text/css">
.rollover {
 background: url('npush.png');
 width: 200px;
 height: 40px;
 text-align:center;
 text-decoration:none;
 font-size:12pt;
 vertical-align:middle;
 display: table-cell; 
}
.rollover:hover {
 background: url('push.png');
}
.contein {
 height:35;
}
</style>
<body leftmargin="1" topmargin="1">

<div>
		<TABLE BORDER="0" WIDTH="1000" ALIGN="CENTER">
		<TR><TD><A HREF="tests.php"><IMG SRC="logo.png" WIDTH="1000"></A></TD></TR>
		</TABLE>
</div>
<div class="contein" align="center">
<div onClick="document.location='a';return false" class="rollover">ТЕКСТ</div><div onClick="document.location='a';return false" class="rollover">ТЕКСТ</div><div onClick="document.location='1';return false" class="rollover">ТЕКСТ</div></div>

</body>

</html>

barsev · March 15, 2010

Переварит и лиса, только в стилях укажите конкретный элемент: div.rollover и div.rollover:hover.

P.S. А почему вам не нравится сделать ссылками? Ведь все равно вашу последнюю конструкцию не переварит IE - он :hover понимает только для <a>.

Edited March 15, 2010 by barsev

kxz8 · March 16, 2010

Подогнал всё как надо. IE тоже переварил, за исключением одного - в IE текст на кнопках не выравнивается по-вертикали.... Не могу решить проблему, сорри что докапываюсь, но как можно исправить?

http://tests.star--art.ru/

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

<head>

<title></title>
<style type="text/css">
a.rollover {
 background: url('npush.png');
 width: 200px;
 height: 40px;
 text-align:center;
 text-decoration:none;
 font-size:12pt;
 vertical-align:middle;
 display: table-cell; 
}
a.rollover:hover {
 background: url('push.png');
}
div.contein {
 height:35px;
}body.parametrs {
 margin-left:1px;
 margin: 1px 1px 1px 1px;
}</style>

</head>


<body class="parametrs">

<div>
		<TABLE BORDER="0" WIDTH="1000" ALIGN="CENTER">
		<TR><TD><A HREF="tests.php"><IMG SRC="logo.png" WIDTH="1000"></A></TD></TR>
		</TABLE>
</div>
<div class="contein" align="center">
<a href="a" class="rollover">ТЕКСТ</a><a href="a" class="rollover">ТЕКСТ</a><a href="1" class="rollover">ТЕКСТ</a></div>

</body>

</html>

barsev · March 16, 2010

Добавьте в свой код следующее:

a.rollover span {position:relative; top:12px;}
a.rollover:hover span {top:8px;}
и в HTML
<a href="a" class="rollover"><span>ТЕКСТ</span></a>

Вам должно понравиться. Да и больше сами экспериментируйте, а то на такой мелочи застряли.

Sign In

Проблема с div и onmouseover

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information