|
| |
|
|
| |
для: mechanic
(22.10.2008 в 07:59)
| | | Подозрения у вас правильные.
Однако никаких массивов хранить не надо и особливых функций
для вычисления индекса не нужно.
Всякая ячейка ЗНАЕТ свой индекс в коллекции cells её родителя.
В коде моего примера следует cells [0] и cells [2] заменить
на cells [this.cellIndex - 1] и cells [this.cellIndex + 1] соответственно.
В итоге получится универсальный (и одинаковый) код для всех пунктов меню. | |
| |
|
|
| |
|
|
| |
для: PAT
(21.10.2008 в 08:38)
| | | у меня смутные подозрения, что для второго пункта меню нужно будет использовать cells[3] + cells[5], для третьего - cells[6] + cells[8] и т.д. массивчик где то надо хранить ага, или вычислять этот индекс функцией ) мой пример действительно неудачен, css фтопку | |
| |
|
|
| |
|
|
| |
для: PAT
(21.10.2008 в 08:38)
| | | Уважаемый PAT, всё получилось. Спасибо большое за помощ. Всё красиво и кросплатформенно. Открыл для себя наследования в таблицах. Не знал этого. Очень круто, спасибо ещё и за это. | |
| |
|
|
| |
|
|
| |
для: mechanic
(21.10.2008 в 09:12)
| | | С ума сойти можно!!!
От красоты вашего решения.
Особливо понравилось
Полагаю, что ещё красивше было бы так:
<свин></свин>Главная<хрен></хрен>
|
| |
| |
|
|
| |
|
|
| |
для: PAT
(21.10.2008 в 08:38)
| | | ненене, настоящие джедаи делают не так.. учим css!
3 ячейки элемента меню меняются на одну, а внутри пишется ссылка.. примерно так:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td><a href="/index.php"><i></i>Главная<b></b></a></td>
.....
</tr>
</table>
|
а самое интересное - через css
table tr {
height:38px; /*высота боковых рисунков + вертикальный padding у "a" (3px) */
}
table td a {
display:block;
position:relative;
height:100%;
margin:0px 10px; /* 10px по ширине боковых рисунков */
}
table td a i, table td a b {
display:block;
position:absolute;
width:10px;
height:32px;
top:0px;
}
table td a i {
left:-10px;
background:url('img/oval_left.gif') #cfc no-repeat;
}
table td a b {
right:-10px;
background:url('img/oval_right.gif') #ccf no-repeat;
}
/* стиль при наведении */
table td a:hover {
background-color:#efefef;
}
table td a:hover i {
background:url('img/oval_left2.gif') #cec no-repeat;
}
table td a:hover b {
background:url('img/oval_right2.gif') #cc0 no-repeat;
}
|
вроде даже кроссбраузерно ) | |
| |
|
|
| |
|
|
| |
для: Aramor
(21.10.2008 в 04:27)
| | | 1.
<td align='left' width='25%' class='menu_top_box_off'><div id='coolmenu'><a href='index.php'>Главная</a></div></td>
|
меняете на
<td width="25%" class="menu_top_box_off">Главная</td>
|
и в обоих классах ячейки (menu_top_box_off и menu_top_box_on) прописываете правило:
Таким образом решается частично вторая ваша задача - в любом месте ячейки "курсор меняется на палец".
2. Левая, центральная и правая ячейки одной строки <TR> - это ТРИ ребёнка ОДНОГО родителя (тега <TR>).
А родитель (тег <TR>), в свою очередь, имеет коллекцию всех ТРЁХ своих детей , т.е. ячеек cells.
При наведении/отведении курсора на любую из трёх ячеек всегда можно "позвать папу"
(т.е. обратиться к родителю) и попросить родителя что-то сделать с каждым из трёх своих детей.
Ваша первая задача - изменить класс центральной ячейки и одновременно изменить картинки
в левой и правой ячейке при наведении/отведении мыши поэтому решается просто:
<td width="25%" class="menu_top_box_off"
onmouseover="this.className = 'menu_top_box_on'; this.parentNode.cells [0].firstChild.src = 'другой_гиф_левой_ячейки'; this.parentNode.cells [2].firstChild.src = 'другой_гиф_правой_ячейки';"
onmouseout="this.className = 'menu_top_box_off'; this.parentNode.cells [0].firstChild.src = 'img/oval_left.gif'; this.parentNode.cells [2].firstChild.src = 'img/oval_right.gif';">Главная</td>
|
3. Ну и последняя задача - клик по любому месту центральной ячейки должен сработать как ссылка.
Ячейке назначаете дополнительно инструкцию по событию ONCLICK. Окончательно:
<td width="25%" class="menu_top_box_off"
onmouseover="this.className = 'menu_top_box_on'; this.parentNode.cells [0].firstChild.src = 'другой_гиф_левой_ячейки'; this.parentNode.cells [2].firstChild.src = 'другой_гиф_правой_ячейки';"
onmouseout="this.className = 'menu_top_box_off'; this.parentNode.cells [0].firstChild.src = 'img/oval_left.gif'; this.parentNode.cells [2].firstChild.src = 'img/oval_right.gif';"
onclick="document.location.href = 'index.php';">Главная</td>
|
PS. Прописывать align="left" у ячеек не надо - по умолчанию все ячейки и так
именно этот align имеют. | |
| |
|
|
| |
|
|
| | Здравствуйте.
У меня есть меню, которое рисуется так:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td align='left'><img src='img/oval_left.gif' width='10' height='32'></td>
<td align='left' width='25%' class='menu_top_box_off' onmouseover='this.className=\"menu_top_box_on\";' onmouseout='this.className=\"menu_top_box_off\";'><div id='coolmenu'><a href='index.php'>Главная</a></div></td>
<td align='left'><img src='img/oval_right.gif' width='10' height='32'></td>
<td align='left'><img src='img/oval_left.gif' width='10' height='32'></td>
<td align='left' width='25%' class='menu_top_box_off' onmouseover='this.className=\"menu_top_box_on\";' onmouseout='this.className=\"menu_top_box_off\";'><div id='coolmenu'><a href='news.php'>Новости</a></div></td>
<td align='left'><img src='img/oval_right.gif' width='10' height='32'></td>
...........................................и так ещё два элемента
</tr>
</table>
Один элемент меню состоит из трёх ячеек: ценральной, и двух боковых, в которых находятся закруглённые рисунки.
Сейчас при наведении на центральную ячейку. она меняет цвет. Плохо то, что боковые цвет не меняют, и то, что нельзя нажать на ячейку как на ссылку, нужно нажимать именно на ссылке чтобы осуществился переход.
Значит задача следующая: Нужно, чтобы при наведении на центральную ячейку, менялся стиль всех трёх, а конкретно нужно поменять цвет чентральной и прорисовать другие гифы у боковых. Нужно, чтобы при наведении на центральную курсор менялся на палец и можно было щёлкнуть в любом месте ячейки.
Помогите пожалуйсто, гуру CSS и JS. | |
| |
|
|
|
