VPF::как изменить цвет ячейки под гиперссылкой

nadyui

Дата 15.10.2006, 00:29 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 30.10.2005

Репутация: нет
Всего: нет

Подскажите, плиз. Хочется чтобы при наведении мышки на гиперссылку не только под ее текстом цвет фона менялся, а вообще у всей ячейки таблицы.
Вот сокращенный вариант кода менюшки (с изменением цвета только под ссылкой)

Код

<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 уже используется

Это сообщение отредактировал(а) Illuminaty - 16.10.2006, 07:26

UpL1nK

Дата 15.10.2006, 02:17 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 102
Регистрация: 3.12.2005
Где: Тюмень

Репутация: нет
Всего: нет

Цитата(nadyui @ 15.10.2006, 00:29)

Цитата

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

Точку с запятой и дальше smile

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

Это сообщение отредактировал(а) UpL1nK - 15.10.2006, 02:18

--------------------

Макс

nadyui

Дата 15.10.2006, 23:31 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 30.10.2005

Репутация: нет
Всего: нет

Честно говоря, ничего не получилось. 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>

Это сообщение отредактировал(а) Illuminaty - 16.10.2006, 07:27

zera

Дата 16.10.2006, 20:20 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 19.1.2006
Где: saint-petersburg

Репутация: 5
Всего: 9

слишком много букв. то что увидел
вместо

Код


<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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 30.10.2005

Репутация: нет
Всего: нет

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

skyboy

Дата 17.10.2006, 00:26 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 30.10.2005

Репутация: нет
Всего: нет

Cпасибо, skyboy и zera , теперь все работает. Красота - глаз не отвести, сижу и любуюсь на менюшку. smile

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

skyboy

Дата 17.10.2006, 16:39 (ссылка)

(нет голосов)

Загрузка ...

неОпытный

Профиль
Группа: Модератор
Сообщений: 9820
Регистрация: 18.5.2006
Где: Днепропетровск

Репутация: 6
Всего: 260

nadyui, да. именно. это имеет отношение не к javascript в частности, а к механизму DOM(Document Object Model), согласно которому происходит обработка HTML-кода и отображение страницы. Потому члше смотреть документацию по DOM(в общем) и/или по DHTML(в частности - эт правила работы с HTML, основываясь на DOM).
Посмотреть можно, например, на WDH

zera

Дата 19.10.2006, 12:37 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 205
Регистрация: 19.1.2006
Где: saint-petersburg

Репутация: 5
Всего: 9

упс. this.parentNode.parentNode.parentNode - это перебор smile

. сначала код написал, потом font и b убрал.

nadyui

Дата 19.10.2006, 16:33 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 51
Регистрация: 30.10.2005

Репутация: нет
Всего: нет

спасибо, буду изучать

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »