Форум

MiHALbI4 · #1 (**permalink**) 24.12.2010, 01:17

В общем я с таким сталкиваюсь впервые, так что прошу вашей помощи. Есть горизонтальное меню, пункты которого (тег li) не фиксированы по ширине и зависят от текста в них. Хитрость в том, что по бокам у этого пункта есть картинки и при наведении они должны меняться. Долго ломал голову и сделал через JavaScript. Но вот косяк из-за использования id:

Дальше меня не хватило

Вот ту выкладываю архив с данным меню: http://rghost.ru/3728840

Если кто знает как помочь, то можете править прямо в указанном мной шаблоне. Заранее спасибо!

Aetae · #2 (**permalink**) 24.12.2010, 01:54

Это делается элементарно через hover. Даже смотреть лень.

Gvozd · #3 (**permalink**) 24.12.2010, 02:31

Если вы не хотите изучать основы, и вам не подходит предыдущий овтет, то для вас более подойдет следующее

Цитата:

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

ksa · #4 (**permalink**) 24.12.2010, 10:41

Сообщение от MiHALbI4

Вот ту выкладываю архив с данным меню

Если сделаешь тут простой тестовый пример - можно будет показать чего и как...

MiHALbI4 · #5 (**permalink**) 24.12.2010, 12:00

Ну как тогда через ховер заменить не только бэкграунд, но и две боковые картинки?

dmitriymar · #6 (**permalink**) 24.12.2010, 13:29

Сообщение от MiHALbI4

Ну как тогда через ховер заменить не только бэкграунд, но и две боковые картинки?

мож стоит сначала почитать что такое ховер прежде чем картинки им менять?

смысл? сделай две картинки нажатая и нет и взамо меняй их-чем работать с 6ю элементами проще с двумя

ksa · #7 (**permalink**) 24.12.2010, 14:12

Сообщение от MiHALbI4

как тогда через ховер заменить не только бэкграунд, но и две боковые картинки?

Как вариант...

<!DOCTYPE html>
<html>
<head>
<style>
* {
	margin: 0;
	padding: 0;
}
ul {
	list-style-type: none;
}
li {
	float: left;
	height: 20px;
	margin-right: 10px;
	background-color: silver;
}
li:hover {
	background-color: blue;
}
li * {
	float: left;
}
li div {
	height: 100%;
	width: 20px;
	background-color: orange;
}
li:hover div {
	background-color: green;
}
</style>
<script>
</script>
</head>
<body>
<ul>
	<li>
		<div class='left'></div>
		<p>Item 1</p>
		<div class='right'></div>
	</li>
	<li>
		<div class='left'></div>
		<p>Item 2</p>
		<div class='right'></div>
	</li>
	<li>
		<div class='left'></div>
		<p>Item 3</p>
		<div class='right'></div>
	</li>
</ul>
</body>
</html>

Aetae · #8 (**permalink**) 25.12.2010, 03:04

!6! картинок на кнопку это бред.
На самом деле это делается примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
	<style type="text/css">
	* {margin:0;padding:0}
	.m,.m li,.m a,.m span {display:block;float:left}
	.m a,.m span {height:38px;background-image:url('http://javascript.ru/forum/attachment.php?attachmentid=610&stc=1&d=1293235420')}
	.m li {padding-right:25px}
	.m a {padding-left:25px;background-position:-25px 0;position:relative}
	.m span {width:25px;right:-25px;position:absolute}
	.m a:hover {background-position:-25px 38px}
	.m a:hover span {background-position:0 38px}
	</style>
</head>
<body>
	<ul class="m">
		<li><a href="#"><span></span>Пункт</a></li>
		<li><a href="#"><span></span>Пункт номер два</a></li>
	</ul>
</body>
</html>

dmitriymar · #9 (**permalink**) 25.12.2010, 08:38

Aetae,
посчитай сам.в том варианте что он представил первый раз. 2 боковые секции одного окраса+2 бок секции другого окраса-это 4 общих элемента для двух кнопок+2 тела 2х кнопок-итого 6 элементов. а по поводу 6 картинок -я не писал-там чётко написано-6 ЭЛЕМЕНТОВ!! ты ведь сам сделал через смену картинок-и не важно бекграунд или прямо имидж вязать

Aetae · #10 (**permalink**) 25.12.2010, 08:49

0_o? У него в архивчике 6 пнг картинок.

Форум

Справочник

Discord чат

Курсы javascript