Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > как изменить цвет ячейки под гиперссылкой


Автор: nadyui 15.10.2006, 00:29
Подскажите, плиз. Хочется чтобы при наведении мышки на гиперссылку не только под ее текстом цвет фона менялся, а вообще у всей ячейки таблицы. 
Вот сокращенный вариант кода менюшки (с изменением цвета только под ссылкой)
Код
<html>
<head>
<style type="text/css">
a.backRed:hover{
  background-color: #FF0000;
}
.backGreen:hover{
  background-color: #00FF00;
}
a.textWhite:hover
{
color: #FFFFFF;
}
</style>
</head>
<body>
<table>
<tr><td>
<a class="backRed textWhite " href="http://www.foto.ru">Фотосъемка мебели</a></td><tr><td>
<a class="backGreen" href="http://www.foto.ru">выставки</a></td></tr></tr></table>
</body>
</html>


Добавлено @ 00:37 
Да, забыла маленькое пояснение - у меня при наведении на ссылку будет всплывающая менюшка открываться, поэтому наверное javascript тут не подойдет, onmouseover уже используется 

Автор: UpL1nK 15.10.2006, 02:17
Цитата(nadyui @ 15.10.2006,  00:29)
Цитата

Да, забыла маленькое пояснение - у меня при наведении на ссылку будет всплывающая менюшка открываться, поэтому наверное javascript тут не подойдет, onmouseover уже используется



Точку с запятой и дальше smile
Задай ID(NAME) ячейке нужной, потом через getElementById('ID').style.background-color(image):цвет(картинка); меняй бэкграунд.

Автор: nadyui 15.10.2006, 23:31
Честно говоря, ничего не получилось.  smile Объясните, плиз, как это грамотно  встроить в страничку.
Вот ее более полная версия с менюшкой javascript (менять цвет должна ячейка  id="foto")

Код
<html>
<head>
<title>Фотосъемка мебели</title>
<style type="text/css">
<!--
  Body       {font-family: Verdana; font-size: 11pt; color: #000000;}
  Td         {font-family: Verdana; font-size: 11pt; color: #000000;}
  A:Link     {color: #000080; Text-decoration: none; }
  A:Visited  {color: #000080; Text-decoration: none; }
  A:Active   {color: #000080; Text-decoration: none; }
  A:Hover    {color: #0000ff; Text-decoration: underline; }
  .navlink2 { font-size: 11pt; font-family: Verdana; cursor: hand; text-decoration: underline;}
-->
</style>
<script language=javascript>
<!--
var LinkDivActive = 0;
var onDiv;
var timeOnDiv;
var layerRef;
var styleRef;
var showVar;
var hideVar;

if (navigator.appName == "Netscape") {
 layerRef="document.";
 styleRef="";
 showVar="'show'";
 hideVar="'hide'";
} else {
 layerRef="document.all.";
 styleRef=".style";
 showVar="'visible'";
 hideVar="'hidden'";
}

//Divisions Show | Hide
function hideDiv(divn) {
 eval(layerRef+divn+styleRef+'.visibility = '+hideVar);
}
function showDiv(divn) {
 eval(layerRef+divn+styleRef+'.visibility = '+showVar);
}

//Link Divisions Stuff
function showLinkDiv(divn) {
 if (timeOnDiv != null) {
  clearTimeout(timeOnDiv);
  hideDiv(onDiv);
 }
 showDiv(divn);
 onDiv = divn;
}

function divTimer() {
 timeOnDiv = setTimeout("divOut()",500)
}

function divOut() {
 if (LinkDivActive == 0) {
  hideDiv(onDiv);
 } 
}

function LinkDivOver() {
 LinkDivActive = 1;
 clearTimeout(timeOnDiv);
}

function LinkDivOut() {
 LinkDivActive = 0;
 timeOnDiv = setTimeout("divOut()",500)
}
//-->
</SCRIPT>
</HEAD>

<body>
<div align="center">
  <center>
  <table  width="820" height="555" >
    <tr>
      <td width="185" height="145">&nbsp;</td>
      <td width="635">
       <div align="center">
        <table width="635" height="145">
          <tr>
            <td width="445"></td>
          </tr>
        </table>
       </div>
       </td>
    </tr>
    <tr>
      <td width="185" height="410" valign="top" align="left">
        <div align="center">
          <table  width="185" height="410">
            <tr>
              <td height="40"></td>
            </tr>
            <tr>
              [color=red]<td ID="foto" [/color]valign="top"><b><font size="3">
<A class="navlink1" href="" onmouseover="showLinkDiv('linkdiv1');window.status='';return true" onmouseout="divTimer();window.status=''" >
Фотосъемка мебели</A><BR>

 </font></b></td>
            </tr>
            <tr>
              <td valign="top"><b><font size="3">
        Выставки<br>
 </font></b></td>
            </tr>
          </table>
        </div>
      </td>
      <td height="410">
        <div align="center">
          <table border="0" cellpadding="0" cellspacing="0" width="635" height="410">
            <tr>
              <td width="316" valign="top" align="left"> <p style=" margin-top: 55">
<DIV id="linkdiv1" style=" left:0px; top:55px; z-index:99; visibility:hidden">
<TABLE cellspacing="0" cellpadding="7" bgcolor="#DA251D">
<TR><TD align="left" valign="top">
<A class="navlink2" href="" onmouseover="LinkDivOver();window.status='';return true" onmouseout="LinkDivOut();window.status=''">офисная мебель</A><BR>
<A class="navlink2" href="" onmouseover="LinkDivOver();window.status='';return true" onmouseout="LinkDivOut();window.status=''">кухни</A><BR>
<A class="navlink2" href="" onmouseover="LinkDivOver();window.status='';return true" onmouseout="LinkDivOut();window.status=''">ванные комнаты</A><BR>
<A class="navlink2" href="" onmouseover="LinkDivOver();window.status='';return true" onmouseout="LinkDivOut();window.status=''">другое</A></p>
</TD></TR>
</TABLE>
</DIV></td>
            </tr>
          </table>
        </div>
      </td>
    </tr>
  </table>
  </center>
</div>

</body>

</html>

Автор: zera 16.10.2006, 20:20
слишком много букв. то что увидел
вместо
Код

<td ID="foto" valign="top"><b><font size="3"><A class="navlink1" href="" 
onmouseover="showLinkDiv('linkdiv1');window.status='';return true" 
onmouseout="divTimer();window.status=''" >Фотосъемка мебели</A><BR>
</font></b></td>

это
Код

<td ID="foto" valign="top"><A class="navlink1" href="" 
onmouseover="this.parentNode.parentNode.parentNode.style.backgroundColor='#00FF00';return false;" 
onmouseout="this.parentNode.parentNode.parentNode.style.backgroundColor='#FF0000';return false;" >Фотосъемка мебели</A><BR />
</td>

<font> и <b> убери в стили, там какой-то класс все-равно указывается. 
можно статус добавить, хотя это порочная практика.

Автор: nadyui 16.10.2006, 23:22
Цвет ячейки меняется, выглядит все супер, но менюшка-то всплывающая при этом не работает!
При наведении на "фотосъемку" менюха должна всплывать а фон ячейки под фотосъемкой менять цвет. Мечтать не вредно, конечно...  smile 

Автор: skyboy 17.10.2006, 00:26
Цитата(nadyui @  16.10.2006,  22:22 Найти цитируемый пост)
но менюшка-то всплывающая при этом не работает

странно, что ты не заметила. уважаемый zera увлекся и убрал из обработчика onmouseover все, что касалось менюшки.
вроде бы,  так надо:
Код

<td ID="foto" valign="top"><A class="navlink1" href="" 
onmouseover="this.parentNode.parentNode.parentNode.style.backgroundColor='#00FF00';showLinkDiv('linkdiv1');
window.status='';
return false;" 
onmouseout="this.parentNode.parentNode.parentNode.style.backgroundColor='#FF0000';
divTimer();
return false;" >Фотосъемка мебели</A><BR />
</td>

Автор: nadyui 17.10.2006, 16:09
Cпасибо, skyboy и zera , теперь все работает. Красота - глаз не отвести, сижу и любуюсь на менюшку.  smile 
Один только вопрос: this.parentNode.parentNode.parentNode  повторяется трижды, я так поняла что это имеет отношение к структуре таблицы table-tr-td, то есть таким макаром я обращаюсь к третьему по счету элементу?
Извините за наивный вопрос, просто в книжке по которой я разбирала JavaScript такого не было.

Автор: skyboy 17.10.2006, 16:39
nadyui, да. именно. это имеет отношение не к javascript в частности, а к механизму DOM(Document Object Model), согласно которому происходит обработка HTML-кода и отображение страницы. Потому члше смотреть документацию по DOM(в общем) и/или по DHTML(в частности - эт правила работы с HTML, основываясь на DOM). 
Посмотреть можно, например, на http://wdh.suncloud.ru/contents.htm

Автор: zera 19.10.2006, 12:37
упс. this.parentNode.parentNode.parentNode - это перебор  smile . сначала код написал, потом font и b убрал.

Автор: nadyui 19.10.2006, 16:33
 smile спасибо, буду изучать

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)