Таблица-ссылка. Как лучше сделать?

BMG · 06.03.2009, 00:30

Как лучше сделать таблицу ссылкой со сменой стиля при наведении?
Первые две ячейки должны быть ссылкой.
При наведении должен меяться фон всей таблицы.

PHP код:


			
<table width=100% class=exlist ONMOUSEOVER="this.className='exhover'" ONMOUSEOUT="this.className='exlist'">

<tr>

    <td width=100 style='cursor:pointer;cursor:hand;' onClick="location='URL'">

        <div class=tit>text</div>

    </td>

    <td style='cursor:pointer;cursor:hand;' onClick="location='URL'">

        <div class=val><a href=URL>text</a></div>

    </td>

    </td>

    <td width=20>text</td>

</tr>

</table>

Поисковики вроде должны перейти по ссылке, а вот пользователи с отключеным javasript не смогут

Или может забить на посетителей без JS и не париться?

ace_rus · 06.03.2009, 01:04

нахрен тебе яваскрипт? есть css. есть псевдо-свойство hover. Все

.tp1: {
background: white;
color: #fff;
}

.tp1:hover {
background: red;
color: #fff;
}

это не будет само по себе работать в ie6, но если погуглить на предмет ie6 + hover - заработает

DNA · 06.03.2009, 08:31

Цитата:

Сообщение от ace_rus

это не будет само по себе работать в ie6, но если погуглить на предмет ie6 + hover - заработает

Собственно и в ie7 тоже не будет

Да и вообще не будет в вашем варианте, потому как ТС желает смены фона таблицы при наведении лишь на некоторые её элементы. Я конечно не очень силен в css, но по-моему тут без js никак.

---
ТС, у вас лишний </td> в коде.

ace_rus · 06.03.2009, 11:17

Какая разница, присвоить класс ячейке - будет hover у ячейки, а не у всей таблицы.

а для ie способов масса уже есть кроме (и лучше js)- гугль в помощь

Добавлено через 3 минуты
например..

http://seoandweb.blogspot.com/2008/0...-60-hover.html
http://poeticcode.wordpress.com/2008...ivhover-in-ie/

DNA · 06.03.2009, 11:21

Цитата:

Сообщение от ace_rus

Какая разница, присвоить класс ячейке - будет hover у ячейки, а не у всей таблицы.

Цитата:

Первые две ячейки должны быть ссылкой.

Цитата:

При наведении должен меяться фон всей таблицы.

т.е. остальные ссылками быть не должны, соответственно при наведении на них фон у всей таблицы не должен меняться. Как с помощью css реализовать смену фона всей таблицы при наведении на !некоторые! её ячейки?

BMG · 06.03.2009, 12:33

PHP код:


			
<html> 

<head> 

<title> New Document </title> 

<style> 



table.exlist { 

  font-size: 10px; 

  background-color: #ffffff; 

  text-decoration:none; 

} 



table.exlist:hover { 

  font-size: 10px; 

  font-weight: bold; 

  background-color: #ffebe0; 

  text-decoration: none; 

} 

a.blk { 

  width:100%; 

  height:100%; 

  display:block; 

  color: #673F8F;     

  text-decoration:none; 

} 

a.blk:hover { 

  width:100%; 

  height:100%; 

  display:block; 

  color: #673F8F;     

  text-decoration:none; 

} 



</style> 



</head> 



<body> 



<table width=100% border=0 cellspacing="0" cellpadding="0" class=exlist> 

<tr> 

<td width=100 style='cursor:pointer;cursor:hand;' onClick="location='URL'"> 

Название:<br>Дата:<br>Город:<br>Организация:</td> 

<td><a class=blk href=URL>БЛА БЛА БЛА НЕТ БАБЛА<br>01.01.1970<br>Сыктывкар<br>Копытцо Орг</a></td> 

<td width=50>просто текст без ссылки</td> 

</tr> 

</table> 

<table width=100% border=0 cellspacing="0" cellpadding="0" class=exlist> 

<tr> 

<td width=100 style='cursor:pointer;cursor:hand;' onClick="location='URL'"> 

Название:<br>Дата:<br>Город:<br>Организация:</td> 

<td><a class=blk href=URL>БЛА БЛА БЛА НЕТ БАБЛА<br>01.01.1970<br>Сыктывкар<br>Копытцо Орг</a></td> 

<td width=50>просто текст без ссылки</td> 

</tr> 

</table> 



</body> 

</html>

Вот такая конструкция должна быть, в FF показывает как надо. В IE7 почему-то перестало выделяться при наведении, хотя минут 10 назад работало

. В IE6 yникогда не выделялось.
Собственно хочется что в IE6 тоже было так.

BMG · 06.03.2009, 13:34

Цитата:

Сообщение от ace_rus

Какая разница, присвоить класс ячейке - будет hover у ячейки, а не у всей таблицы.

а для ie способов масса уже есть кроме (и лучше js)- гугль в помощь

Добавлено через 3 минуты
например..

http://seoandweb.blogspot.com/2008/0...-60-hover.html
http://poeticcode.wordpress.com/2008...ivhover-in-ie/

.htc этот тот же JS, но у этого способа есть большой плюс - будет гораздо меньше кода на странице.
Вроде получилось.
hover.htc

PHP код:


			
<attach for=element event=onmouseover handler=topm>

<attach for=element event=onmouseout handler=verm>

<script>

  function topm(){element.className += ' hover';}

  function verm(){element.className = element.className.replace(/ hover/g, '');}

</script>

в стиль table.exlist добавил строчку

PHP код:


			
  behavior:url("hover.htc");

и еще один стиль для IE6

PHP код:


			
table.hover {  

  font-size: 10px;  

  font-weight: bold;  

  background-color: #ffebe0;  

  text-decoration: none;  

}

Большое спасибо

06.03.2009, 00:30	#1
BMG Специалист Регистрация: 14.09.2007 Сообщений: 271 Вес репутации: 211	Таблица-ссылка. Как лучше сделать? Как лучше сделать таблицу ссылкой со сменой стиля при наведении? Первые две ячейки должны быть ссылкой. При наведении должен меяться фон всей таблицы. PHP код: `<table width=100% class=exlist ONMOUSEOVER="this.className='exhover'" ONMOUSEOUT="this.className='exlist'"> <tr> <td width=100 style='cursor:pointer;cursor:hand;' onClick="location='URL'"> <div class=tit>text</div> </td> <td style='cursor:pointer;cursor:hand;' onClick="location='URL'"> <div class=val><a href=URL>text</a></div> </td> </td> <td width=20>text</td> </tr> </table>` Поисковики вроде должны перейти по ссылке, а вот пользователи с отключеным javasript не смогут Или может забить на посетителей без JS и не париться? __________________ Чихуахуа и другие маленькие собачки ищут дом

06.03.2009, 11:17	#4
ace_rus Новичок Регистрация: 13.01.2009 Сообщений: 74 Вес репутации: 190	Какая разница, присвоить класс ячейке - будет hover у ячейки, а не у всей таблицы. а для ie способов масса уже есть кроме (и лучше js)- гугль в помощь Добавлено через 3 минуты например.. http://seoandweb.blogspot.com/2008/0...-60-hover.html http://poeticcode.wordpress.com/2008...ivhover-in-ie/ Последний раз редактировалось ace_rus; 06.03.2009 в 11:17. Причина: Добавлено сообщение

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Сделать проект лучше	10012003	Пожелания пользователей системы	63	25.11.2008 14:55
Таблица средних цен	solomko.net	Пожелания пользователей системы	26	12.09.2008 09:15
Какую лучше сделать структуру сайта?	holdem	Вопросы от новичков	8	19.08.2008 17:30
Переезд или как лучше сделать	MFKilla	Вопросы от новичков	0	30.01.2008 19:01
как лучше сделать домена...	X039uH	Курилка	10	20.01.2008 18:18

06.03.2009, 01:04	#2
ace_rus Новичок Регистрация: 13.01.2009 Сообщений: 74 Вес репутации: 190	нахрен тебе яваскрипт? есть css. есть псевдо-свойство hover. Все .tp1: { background: white; color: #fff; } .tp1:hover { background: red; color: #fff; } это не будет само по себе работать в ie6, но если погуглить на предмет ie6 + hover - заработает