Jump to content
  • 0

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

kxz8

Asked by kxz8,

 Share

Question

kxz8 Explorer

kxz8

Posted
Posted

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/ здесь остаётся только вставить текст в кнопки, но как...?

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

Link to comment
Share on other sites

16 answers to this question

Recommended Posts

  • 0
-O-J-A- Explorer

-O-J-A-

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

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

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

Link to comment
Share on other sites
  • 0
kxz8 Explorer

kxz8

Posted
  • Author
Posted (edited)

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

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

Edited by kxz8
Link to comment
Share on other sites
  • 0
Garino Explorer

Garino

Posted
Posted

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

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

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

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;
}

Link to comment
Share on other sites
  • 0
Garino Explorer

Garino

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

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

Link to comment
Share on other sites
  • 0
kxz8 Explorer

kxz8

Posted
  • Author
Posted (edited)

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

<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 by kxz8
Link to comment
Share on other sites
  • 0
barsev Explorer

barsev

Posted
Posted (edited)

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

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

Edited by barsev
Link to comment
Share on other sites
  • 0
kxz8 Explorer

kxz8

Posted
  • Author
Posted

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

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 не помогли... Что можно ещё попробывать?

Link to comment
Share on other sites
  • 0
kxz8 Explorer

kxz8

Posted
  • Author
Posted

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

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>

Link to comment
Share on other sites
  • 0
barsev Explorer

barsev

Posted
Posted (edited)

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

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

Edited by barsev
Link to comment
Share on other sites
  • 0
kxz8 Explorer

kxz8

Posted
  • Author
Posted

Подогнал всё как надо. 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>

Link to comment
Share on other sites
  • 0
barsev Explorer

barsev

Posted
Posted

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept