Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > OnMouseOver Замена цвета и риссунка в таблице.

Автор: MotokoK 17.11.2010, 10:32

Кхм.Добрый день. Вопрос наверное дурацкий но все же.

Есть код вот этот

Код


...
print("<TR><TD align=right width=16><IMG src=\"img/m_left.gif\"></TD>");// Левая колонка с рисунком

print("<TD onmouseover=\"this.style.background = '#FCAA04';\"  onmouseout=\"this.style.background ='#0053A1';\" height=33 align=middle bgColor='#0053A1' NOWRAP > <A class=root_link HREF=\"$PHP_SELF?section=$id\">$name</A></TD>");//Центральная колонка с ссылкой

print("<TD align=left width=18><IMG IMG src=\"img/m_right.gif\" ></TD></TR>");//Правая колонка с рисунком
        
print("<TR height=5><TD></TD><TD></TD><TD></TD></TR>");
...

Который выводит в цикле элементы меню.На OnMouseOver цвет элемента меню закрашивается на МаусАут становится прежним.
Проблема в том что в боковых колонках от центальной отображается рисунок с красивым закруглением кнопки того же цвета и закрашивается он в тот же цвет(m_left/right.gif-оригинальный цвет m_left2/right2.gif-цвет закраски.) Как сделать чтобы при наведении именно на ссылку т.е на центальную колонку менялся и ее бг цвет,ну что уже сделано, и рисунок в соседних колонках таблицы? smile

Автор: CruorVult 17.11.2010, 10:56

а пхп тут причем?

Автор: MotokoK 17.11.2010, 11:08

Ну не знала куда написать.Сайт же на пхп пишу smile

ну да это типа хтмл?

Автор: skyboy 17.11.2010, 11:18

M
skyboy

перенесено из php: общие вопросы

Автор: Deadcow 17.11.2010, 19:05

Код


<TR><TD align=right width=16><IMG src=/"img/m_left.gif/"></TD>
<TD onmouseover=\"this.style.background = '#FCAA04';\"  
onmouseout=\"this.style.background ='#0053A1';\" height=33 align=middle bgColor='#0053A1' NOWRAP >
<A class=root_link HREF=\"$PHP_SELF?section=$id\">$name</A> </TD>
<TD align=left width=18><IMG !!-IMG-!! src=/"img/m_right.gif/" ></TD></TR>

Тебе либо нужно написать функцию, по которой будет меняться картинка, либо, что лучше, соединить три колонки в одну... тем более, я так понимаю, левый и правый гиф визуально тоже является частью ссылки, а значит их тоже нужно захватить тэгом <a>...
Если всё же выбрать первый вариант

Код


function On() {
this.style.background = '#FCAA04';
document.getElementById('left').src = 'img/m_lef2t.gif';
document.getElementById('right').src = 'img/m_right2.gif';
}
function Out() {
this.style.background = '#0053A1';
document.getElementById('left').src = 'img/m_left.gif';
document.getElementById('right').src = 'img/m_right.gif';
}
...
<TR><TD align=right width=16><IMG id=left src='img/m_left.gif'></TD>
<TD onmouseover=\"On()';\"  onmouseout=\"Out();\" height=33 align=middle bgColor='#0053A1' NOWRAP > 
<A class=root_link HREF=\"$PHP_SELF?section=$id\">$name</A> </TD>
<TD align=left width=18><IMG id=right src='img/m_right.gif' ></TD></TR>

А еще лучше стиль кнопки со всеми "красивыми закругляшками" прописывать в CSS и применять к простому тексту с помощью div'ов.
И всегда желательно скрипт применяемый к элементам выводимым циклом выносить в функцию, что бы не дублировать одни и те же свойства в теле каждого элемента

Автор: Deadcow 17.11.2010, 19:21

Можно, например, сделать один гиф - подложку под кнопку, поставить фоном в ячейке, по центру расположить текст кнопки, а смену гифки сделать по наведению мышки на эту ячейку.
Но создавать 3 ячейки под одну кнопку точно не стоит smile