| |
|
|
| | Проблема в том как сделать, чтобы при наведении курсора на таблицу менялись стили у тегов <td>, находящихся в данной таблице. Простыми средствами я так понял это не решить, может кто поможет.
вот изначальная таблица:
<table>
<tr>
<td class="a1">
</td>
<td class="a2">
</td>
<td class="a3">
</td>
</tr>
<tr>
<td class="a4">
</td>
<td class="a_c">
CONTENT
</td>
<td class="a5">
</td>
</tr>
<tr>
<td class="a6">
</td>
<td class="a7">
</td>
<td class="a8">
</td>
</tr>
</table>
|
и надо сделать чтобы при наведении на эту таблицу менялись стили у всех тэгов <td>, то есть стало вот так:
<table>
<tr>
<td class="a1_h">
</td>
<td class="a2_h">
</td>
<td class="a3_h">
</td>
</tr>
<tr>
<td class="a4_h">
</td>
<td class="a_c">
CONTENT
</td>
<td class="a5_h">
</td>
</tr>
<tr>
<td class="a6_h">
</td>
<td class="a7_h">
</td>
<td class="a8_h">
</td>
</tr>
</table>
|
вот код CSS, если надо:
td.a1 {
width:10px;
height:10px;
background-image:url('/img/a/1.png')
}
td.a2 {
height:10px;
background-image:url('/img/a/2.png')
}
td.a3 {
width:10px;
height:10px;
background-image:url('/img/a/3.png')
}
td.a4 {
width:10px;
background-image:url('/img/a/4.png')
}
td.a_c {
background-color:#FFFFFF;
vertical-align:top;
padding:5px;
}
td.a5 {
width:10px;
background-image:url('/img/a/5.png')
}
td.a6 {
width:10px;
height:10px;
background-image:url('/img/a/6.png')
}
td.a7 {
height:10px;
background-image:url('/img/a/7.png')
}
td.a8 {
width:10px;
height:10px;
background-image:url('/img/a/8.png')
}
td.a1_h {
width:10px;
height:10px;
background-image:url('/img/a/h1.png')
}
td.a2_h {
height:10px;
background-image:url('/img/a/h2.png')
}
td.a3_h {
width:10px;
height:10px;
background-image:url('/img/a/h3.png')
}
td.a4_h {
width:10px;
background-image:url('/img/a/h4.png')
}
td.a_c {
background-color:#FFFFFF;
vertical-align:top;
padding:5px;
}
td.a5_h {
width:10px;
background-image:url('/img/a/h5.png')
}
td.a6_h {
width:10px;
height:10px;
background-image:url('/img/a/h6.png')
}
td.a7_h {
height:10px;
background-image:url('/img/a/h7.png')
}
td.a8_h {
width:10px;
height:10px;
background-image:url('/img/a/h8.png')
}
|
PS^ Данная конструкция делает вокруг таблицы рамку из картинок если че. Заранее спасибо за помощь | |
| |
|
|
| |
|
|
| |
для: Avel_Mink
(08.07.2010 в 00:00)
| | |
<table id="tbl" onmouseover="myFunc ()" onmouseout="myFunc ()">
<script>
function myFunc ()
{
for (var j = 0, o = document.getElementById ('tbl').getElementsByTagName ('td'), l = o.length; j < l; j++) with (o [j])
if (className.charAt (2) != '_') className = (className.indexOf ('_') < 0) ? (className + '_h') : className.substring (0, 2);
}
</script>
|
| |
| |
|
|
| |
|
|
| |
для: АЯ
(08.07.2010 в 00:48)
| | | Спасибо огромное, только можно ли подкорректировать немного, чтобы когда курсор убирали возращались изначальные стили, то есть по принципу вкл-выкл | |
| |
|
|
| |
|
|
| |
для: Avel_Mink
(08.07.2010 в 10:46)
| | | Вторую строку перепишите так:
className = (className.indexOf('_') < 0 && className.charAt(2) != '_') ? className + '_h' : className.substring(0, 2);
|
| |
| |
|
|
| |
|
|
| |
для: sim5
(08.07.2010 в 11:13)
| | | Спасибо большое, все работает
Заметил, что такая конструкция работает только в одном месте, как сделать чтобы можно было такие таблицы использовать много раз на странице ? Прочитал, что в js нет функции getElementByClass, как это можно обойти ? | |
| |
|
|
| |
|
|
| |
для: Avel_Mink
(08.07.2010 в 12:00)
| | | Нашел вот такую конструкцию, только не знаю как ее правильно прикрутить к моему случаю
<script>
var allTags=new Array();
function getClass(theClass,node,tag,stl,ord) {
if (node==null) node=document;
if (tag==null) tag='*';
var allTags=node.getElementsByTagName(tag);
for (i=0; i<allTags.length; i++) {
if (allTags[i].className==theClass) {
eval('allTags[i].style.'+stl+'=ord');
}
}
}
</script>
|
вызов функции
getClass('имя_класса',null,null,'display','none');
|
| |
| |
|
|
| |
|
|
| |
для: Avel_Mink
(08.07.2010 в 12:00)
| | | Получить коллекцию объектов по имени класса можно в JS, и для этого не обязательно должна быть в нем функция getElementByClass, писать нужно свою, пользовательскую, как это сделано, например, в jQuery.
Код предложенный вам АЯ, тоже можно использовать ко многим таблицам, например:
<style>
.a1 {background:#f08080}
.a2 {background:#1e90ff}
.a1_h {background:#32cd32}
.a2_h {background:#32cd32}
.b1 {background:#daa520}
.b2 {background:#bdb76b}
.b1_h {background:#ff0000}
.b2_h {background:#ff0000}
</style>
<script>
function myFunc(obj, cls) {
//cls имя класса при необходимости
for(var j = 0, o = document.getElementById(obj).getElementsByTagName('td'), l = o.length; j < l; j++) with(o[j])
className = (className.indexOf ('_') < 0) ? className + '_h' : className.substring(0, 2);
}
</script>
<table id="as1" onmouseover="myFunc('as1')" onmouseout="myFunc('as1')">
<tr>
<td class="a1">aaaaaaaa</td>
<td class="a2">aaaaaaaa</td>
</tr>
<tr>
<td class="a1">aaaaaaaa</td>
<td class="a2">aaaaaaaa</td>
</tr>
</table>
<table id="as2" onmouseover="myFunc('as2')" onmouseout="myFunc('as2')">
<tr>
<td class="b1">aaaaaaaa</td>
<td class="b2">aaaaaaaa</td>
</tr>
<tr>
<td class="b1">aaaaaaaa</td>
<td class="b2">aaaaaaaa</td>
</tr>
</table>
|
Нужно лишь описать необходимое количество аргументов, условий... | |
| |
|
|
| |
|
|
| |
для: Avel_Mink
(08.07.2010 в 10:46)
| | | Тогда так - для любого количества таблиц:
<table onmouseover="myFunc (this)" onmouseout="myFunc (this)">
<script>
function myFunc (x)
{
for (var j = 0, o = x.getElementsByTagName ('td'), l = o.length; j < l; j++) with (o [j])
{var t = className; if (t.charAt (1) != '_') className = (t.indexOf ('_') < 0) ? (t + '_h') : t.substring (0, 2)}
}
</script>
|
Ошибку в номере символа charAt (2) я исправил. | |
| |
|
|
