div-ы с одинаковым class

[Anpl]

Доброго дня. Есть модуль который создает блоки (блоки категорий). Сам блок состоит из картинки категории, имени категории и блока субкатегорий. Нужно что бы блок субкатегорий был скрыт и появлялся только при наведении курсора на картинку категории. Скрываю div выводящий субкатегории - visibility:hidden и использую:

function find_sp() {
var f1 = document.getElementById('hp').getElementsByClassNa me('sp')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility = "visible";
}

function hide_sp() {
var f1 = document.getElementById('hp').getElementsByClassNa me('sp')
for (var i=0; i<f1.length; i++)
f1[i].style.visibility= "hidden";
}

Использую это для onMouseOver и onMouseOut.

Но поскольку div-ы создаются автоматически (сколько категорий - столько div-ов) и у всех них один класс: "sp", то при onMouseOver на любую категорию становятся видимыми субкатегории для всех div-ов (т.е. для всех категорий, а не только для той, для которой было событие onMouseOver)

Ребят, подскажите, как реализовать это так, что бы при наведении мыши видимым становлися только блок для одной категории?

[melky]

покажи html. нифига не ясно.

рулить надо от this...

по логике, которую рассказал мне код (?) у тебя так и должно происходить. ты это написал сам

[Anpl]

Сейчас у меня при наведении курсора на любую из категорий - показываются субменю для ВСЕХ категорий какие есть... а мне нужно что бы только для той на которую наведен курсор.

Вот как выводятся категории:



<ul class="pagecateg">
<li >
<div class="categimg" ><a href="http://" title="">
<img src="" title="" alt=""/ onMouseOver="find_sp()" onMouseOut="setTimeout('hide_sp()', 5000)" ></a></div>

<p class="categname" style="padding-bottom:5px" >


<a href="http://" title="" >Text </a></p>

<div class="sp" style='visibility:hidden;'> <div class="subcat">
<a href="http:" title="">
Название субкатегории</a>

</div></div>

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

[melky]

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

вот копия того же скрипта

var i = document.getElementsByTagName("div"),
    a = i.length,
    img,
    mouseoverDivCateg;
    

// назначаем обработчики.
while( a-- ) if ( i[a].className === 'categimg' ) {
    
    // img - картинка внутри div с классом categimg.
    img = i[a].getElementsByTagName('img')[0];
    
    img.onmouseover = find_sp;
    img.onmouseout = hide_sp;
    
}

function find_sp(e) {
    var parent, currElem = e ? e.target : event.srcElement;
    
    // ищем li , с которой начинается текущая категория.
    while( currElem.tagName.toLowerCase() !== 'li' ) currElem = currElem.parentNode;
    

    // ищем div с классом sp, который относится  к текущей категории
    var div = currElem.getElementsByTagName("div"),i = div.length;
    while( i-- ) if (div[i].className === "sp") break;
        div = div[i];

    div.style.visibility = "visible";
    
    // сохраняем этот дивчик, чтобы потом не искать
    mouseoverDivCateg = div;
    
}

function hide_sp() { 
    // скрываем сохраненный див
    mouseoverDivCateg.style.visibility= "hidden";
}

[Anpl]

Ругается на: currElem.tagName is undefined и mouseoverDivCateg is undefined почему то...

[melky]

а, да. забыл сказать

HTML трогал. постирай все обработчики в html.

типа

<img src="" title="" alt=""/ onMouseOver="find_sp()" onMouseOut="setTimeout('hide_sp()', 5000)" >

преврати в

<img src="" title="" alt=""/>

[melky]

обновил. я протсто заигрался, и про IE забыл

[Anpl]

ты знаешь, ругаться не ругается, но и не отрабатывает... ни в Опере, ни Файрфоксе, а в ИЕ отрабатывает но как: при наведении мышью субменю видимыми не становятся, зато при onmouseout пропадает categname (имя категории становится невидимым)

[melky]

не знаю, что ты имел в виду.. наводить на картинку надо было.

заменил картинки

[Anpl]

<div class="sp" style='visibility:hidden;'> <div class="subcat">
<a href="http:" title="">
Название субкатегории</a>

</div></div>

а если таких блоков несколько? (то есть субкатегорий по три - четыре штуки) ? не могу понять... у тебя работает, у меня - нет... хм...