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

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

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

Автор: rthsobakas 17.5.2008, 19:23

вообщем ща попытаюсь объяснить:

<table>
<tr>
<td>
<a href=""> SIlka</a>
</td>
</tr>

</table>

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

Автор: Zorak 17.5.2008, 19:33

ммм я не понял по поводу "ячейка" =)...и как она должна загореться ?

Автор: rthsobakas 17.5.2008, 19:38

Код


<td    align="center" width="100" bgcolor="lightgreen" style="cursor:hand;"  onMouseover='this.style.background="#81AFff";' onMouseOut='this.style.background="lightgreen"'>


<font face="Arial" size="1" color="black"><a href="" class="navText"> </a></font>

</td>

ячейка таблицы имеется ввиду

Автор: Zorak 17.5.2008, 19:46

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

Автор: rthsobakas 17.5.2008, 19:52

сделать можно!
у меня товарищ сделал в дримвеере ,но объяснить что именно изменилось не может)
причем после изучения кода я тоже врубится не могу че там особенного)
не для рекламы конечно
там менюшка есть и там безразницы в каком месте ячейки щелкать, ссылка откроется!

Автор: Zorak 17.5.2008, 20:16

ммм мне даже тоже интересно стало) поищу инфу по поводу етого, если что узнаю, сразу скажу =)

Автор: almagnit 17.5.2008, 20:49

Вот пользуйтесь на здоровье :

Код


<TABLE id="yar1" style="width:250; border-style:solid; border-width:1; margin:0; padding:0">
<TR>
    <TD id="ya1" onclick="doit('1');" onmouseover="paint('1');" onmouseout="repaint('1');" style="padding:0; border-style:solid; border-width:1">1</TD>
    <TD id="ya2" onclick="doit('2');" onmouseover="paint('2');" onmouseout="repaint('2');" style="border-style:solid; border-width:1">2</TD>
    <TD id="ya3" onclick="doit('3');" onmouseover="paint('3');" onmouseout="repaint('3');" style="border-style:solid; border-width:1">3</TD>
    <TD id="ya4" onclick="doit('4');" onmouseover="paint('4');" onmouseout="repaint('4');" style="border-style:solid; border-width:1">4</TD>
    <TD id="ya5" onclick="doit('5');" onmouseover="paint('5');" onmouseout="repaint('5');" style="border-style:solid; border-width:1">5</TD>
</TR>
</TABLE>
<script>
var color=[,"white","white","white","white","white"];
/*for(i=1; i<6; i++){
  color[i]="white";
}*/
function paint(n){
document.getElementById('ya'+n).style.backgroundColor = "green";
}
function repaint(n){
document.getElementById('ya'+n).style.backgroundColor = color[n];
}
function doit(n){
if(color[n]=='white'){
    color[n]='red';
}else{
    color[n]='white';
}
repaint(n);
}
</SCRIPT>

Автор: Zorak 18.5.2008, 13:27

Цитата(almagnit @ 17.5.2008, 20:49)

Вот пользуйтесь на здоровье :

Код


<TABLE id="yar1" style="width:250; border-style:solid; border-width:1; margin:0; padding:0">
<TR>
    <TD id="ya1" onclick="doit('1');" onmouseover="paint('1');" onmouseout="repaint('1');" style="padding:0; border-style:solid; border-width:1">1</TD>
    <TD id="ya2" onclick="doit('2');" onmouseover="paint('2');" onmouseout="repaint('2');" style="border-style:solid; border-width:1">2</TD>
    <TD id="ya3" onclick="doit('3');" onmouseover="paint('3');" onmouseout="repaint('3');" style="border-style:solid; border-width:1">3</TD>
    <TD id="ya4" onclick="doit('4');" onmouseover="paint('4');" onmouseout="repaint('4');" style="border-style:solid; border-width:1">4</TD>
    <TD id="ya5" onclick="doit('5');" onmouseover="paint('5');" onmouseout="repaint('5');" style="border-style:solid; border-width:1">5</TD>
</TR>
</TABLE>
<script>
var color=[,"white","white","white","white","white"];
/*for(i=1; i<6; i++){
  color[i]="white";
}*/
function paint(n){
document.getElementById('ya'+n).style.backgroundColor = "green";
}
function repaint(n){
document.getElementById('ya'+n).style.backgroundColor = color[n];
}
function doit(n){
if(color[n]=='white'){
    color[n]='red';
}else{
    color[n]='white';
}
repaint(n);
}
</SCRIPT>

спс =)

Автор: Fortop 18.5.2008, 15:46

Вообще-то можно в разы проще

CSS

Код


* {
margin:0;
padding:0;
}
a {
    display:block;
}
a:hover {
    background: #C0C0C0;
    color: #707070;
}

HTML

Код


<table>
<tr><td>
<a href="">Текст ссылки</a>
</td></tr>
</table>

Несколько исправил.
Вместо display:inline лучше использовать diplay:block

Автор: almagnit 18.5.2008, 16:33

Цитата(Fortop @ 18.5.2008, 15:46

)

Вообще-то можно в разы проще

Fortop, читай ТЗ:

Цитата(rthsobakas @ 17.5.2008, 19:23

)

Если нажать на ссылку она откроет что то, а что добавить в коде чтобы ссылкой была ячейка(а не тока текст)

Речь шла немного не о том, но пример хороший ( smile

), все никак руки не доходят до нормальной работы с CSS.

Автор: Fortop 18.5.2008, 17:29

almagnit, smile

На форуме часто автор сам не знает, что он хочет на самом деле.
Я думаю, для него важно, чтобы при клике в любом месте ячейки происходил переход по ссылке smile

А не жестко принципиально сделать ячейку - ссылкой smile

Автор: ksnk 25.6.2010, 23:39

Fortop,

Цитата(Fortop @ 18.5.2008, 15:46

)

a {
    display:block;
}
a:hover {
    background: #C0C0C0;
    color: #707070;
}

Не думаю, что юзер обрадуется, если увидит, что ВСЕ ссылки на странице станут такими smile

Код


table a.block {
    display:block;
}
table a.block:hover {
    background: #C0C0C0;
    color: #707070;
}

Код


<table>
<tr><td>
<a class="block" href="">Текст ссылки</a>
</td></tr>
</table>

Автор: mcTep 25.6.2010, 23:57

Код


<style type="text/css">
   td {
       cursor: pointer;
   }
    td.hover {
      background: #ccc;
   }
</style>
<table>
    <tr>
      <td onclick="location.href='http://some.net'" onmouseover="className='hover'" onmouseout="className=''">
         Text
      </td>
    </tr>
</table>