Есть спецы по JavaScript?

[alibek]

Требуются знатоки

Есть такая табличка (HTML):

Код: Выделить всё

<table width="600px" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="btnnrm" onMouseOut="cs_ButtonNormal()" onMouseOver="cs_ButtonHover()"><a href="news.html" name="btn-news" style="color:#000000;">text1</a></td>
<td class="btnnrm" onMouseOut="cs_ButtonNormal()" onMouseOver="cs_ButtonHover()"><a href="client.html" name="btn-client" style="color:#000000;">text2</a></td>
<td class="btnnrm" onMouseOut="cs_ButtonNormal()" onMouseOver="cs_ButtonHover()"><a href="stake.html" name="btn-stake" style="color:#000000;">text3</a></td>
<td class="btnnrm" onMouseOut="cs_ButtonNormal()" onMouseOver="cs_ButtonHover()"><a href="stat.html" name="btn-stat" style="color:#000000;">text4</a></td>
<td class="btanrm" onMouseOut="cs_ButtonNormal()" onMouseOver="cs_ButtonHover()"><a href="live.html" name="btn-live" style="color:#000000;">text5</a></td>
</tr>
</table>

Стили btnnrm и прочие описаны во внешнем CSS-файле, самая важная в нем строчка: background-image: url(btnnrm.gif); (т.е. изображение кнопки в качестве фона ячейки).
Нужно, чтобы при наведении мышки на ячейку таблицы, кнопка выделялась (hover или rollover эффект), для чего надо сменить ее стиль с btnnrm на btnact. Для этого есть две функции, cs_ButtonNormal и cs_ButtonHover.
Вот собственно код этих функций и нужен

Если данный способ не лучший, то приветствуются советы, но:
1. Текст кнопки должен быть именно текстовый, т.е. не подойдет пять кнопок с разными надписями в трех вариантах (нормальная, наведенная, выделенная). Т.е. надо менять подложку текста с изображением кнопки.
2. Код не должен быть громоздкий или занимать много места, этот Rollover всего лишь украшательство.

Когда кнопки были обычными <IMG>, то все работало, но я так и не придумал, как по центру данного IMG выводить текст.

[alibek]

Да, и еще один вопрос
Ссылкой в данном случае является только текст. Т.е. клик по кнопке не работает (без доп. кода). Как этого можно избежать?
Если кто-нибудь посоветует, как выводить текст поверх IMG (по центру), то это решит все проблемы.

[uhm]

Ох, давненько не занимался я этими вещами, подзабыл уже все.

По поводу второго (а, может, и первого вопроса): так пойдет?

<a href="about:blank"><div style="{background-image: url(globe.gif); text-align: center}">Тра-ля-ля</div></a>

[alibek]

uhm, дай я тебя пацалую
Только по вертикали не получается выровнять по центру.

[alibek]

Нет, пока не буду
А как картинку потом менять при наведении мышки?


[EDIT] Обнаружился неприятный глюк, при наведении на такую кнопку отображается неправильный курсор (не для ссылок, а для редактирования текста).

[uhm]

По поводу изменения картинки: щаз будем вспоминать, как оно все делалось (вот ведь склероз,а? )

По поводу курсора: у меня при наведении на такую кнопку отображается курсор в виде руки. Оч. странно. Форму курсора, кстати, тоже можно в стилях прописать.

[uhm]

К сожалению, я уже отстал от жизни web-программиста, поэтому не знаю, насколько то, что я говорю, будет работать в разных версиях браузеров. В моем IE 5.0 работает.

<a href="about:blank" onMouseOver="aaa.style.cssText='{background-image: url(btnact.gif); text-align: center}'">
<div id="aaa" style="{background-image: url(btnnrm.gif); text-align: center}">Тра-ля-ля</div></a>

onMouseOut тоже надо прописать, ессесно.

[alibek]

uhm, я тебя все-же пацалую

Сделал так:
a href=...><div id="btnnrm" onMouseOver="this.id='btnact'" onMouseOut="this.id='btnnrm'">...</div></a>

Остались две проблемы -- центрование по высоте (почему-то vertical-align не работает) и форма курсора, уж не знаю почему. В твоем примере курсор тоже текстовый, а не в форме руки.

[skiperski]

Для IE5.5+, для других - не знаю. Вместо DIV'а можно использовать SPAN или A, или любой другой элемент.

Код: Выделить всё

<style>
.btnnrm, .btnact {
   cursor: hand;
   width: 22px; /*мимнимальная ширина*/
   height: 22px;/*мимнимальная высота*/
   overflow: visible; /*при превышении текстом мин. ширины*/
   font-size: 12px; /*подбирается таким, чтобы при мин.выс. DIV был не выше картинки*/
   background-repeat: no-repeat;
   background-position: center;
}
.btnnrm {
   border: 1px solid silver;
   padding: 2px;
   background-image: url(add2.gif);
}
.btnact {
   border: 2px outset;
   padding: 1px;
   background-image: url(box.png);
}
</style>

<div class="btnnrm" onMouseOut="this.className='btnnrm'" onMouseOver="this.className='btnact'" onclick="location='new_URL'">text</div>

Button with multiline text
<div class="btnnrm" onMouseOut="this.className='btnnrm'" onMouseOver="this.className='btnact'" onclick="location='new_URL'">line 1<br>line 2<br>line 3<br>line 4</div><br>

Button without text
<div class="btnnrm" onMouseOut="this.className='btnnrm'" onMouseOver="this.className='btnact'" onclick="location='new_URL'"></div>

[alibek]

CSS рулит! Сделал вообще без кода

Код: Выделить всё

a.btn
   {
   background-image: url(btnnrm.gif);
   background-position: center;
   background-repeat: no-repeat;
   width: 120px;
   height: 25px;
   display: block;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   }

a.btn:hover
   {
   background-image: url(btnact.gif);
   background-position: center;
   background-repeat: no-repeat;
   width: 120px;
   height: 25px;
   display: block;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   }


И, соответственно, использую <a class="btn" href="#">text</a>.
Но, блин, по вертикали не центрует. Что ему надо?

[uhm]

Нашел вот такое:

http://www.sitepoint.ru/discussion/11/d ... ards/css2/

У меня есть подозрение, что логическое объяснение тому, что vertical-align не работает, таки есть, увы, сейчас нет времени углубляться в этот вопрос.

Без кода - самый правильный вариант, я просто не сообразил, что и без div'а можно, самому <a> назначать background.

[uhm]

Нашел еще вот такое:

Вообще ситуация стандартная. Дело в том, что vertical-alignment - для inline елементов. По-сему, для достижения нужного эффекта следует задать размер текста для данного дива (родительского) такой-же размер, что и высота самого дива. Тогда уже все параметры для vert.-alig. сработают

К сожалению, все сообщения в форуме до этого на армянском языке Поэтому что имелось в виду, точно сказать не могу.

[skiperski]

Подгони пэдингом сверху

[alibek]

Окончательный вариант

Код: Выделить всё

a.btn
   {
   background-image: url(btnnrm.gif);
   background-position: center;
   background-repeat: no-repeat;
   width: 120px;
   height: 25px;
   display: block;
   text-align: center;
   vertical-align: middle;
   white-space: nowrap;
   }

a.btn:hover
   {
   background-image: url(btnact.gif);
   }


padding не подходит -- он себя по разному ведет в разных браузерах. По стандарту он должен добавляться, а в IE он вычитается.
Кроме того, этот padding будет относится не к тексту, а к всему <a>, в т.ч. и к блоку, описывающему текст.

Пока что поставил line-height:200%, посмотрю, что будет.