Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.07.2012, 17:37
Аспирант
Отправить личное сообщение для Hol1killer Посмотреть профиль Найти все сообщения от Hol1killer
 
Регистрация: 17.07.2012
Сообщений: 34

Разворачивание списка при наведение на картинку
Добрый день друзья, начал изучать Jquery, нужно решить задачу по сабжу!

есть таблица с классом .catalog
в ней 4 ячейки, хотелось бы что бы при наведение на фотографию(img) рядом справа появлялся список ul с логотипами(стили я напишу)

получается что в набор попадают все фотографии в ячейках а не в конкретной ячейки и при наведении на любую фотографию в таблице выводится только первый список! Хотелось бы что при наведении на фотографию в данной ячейки выводился список этой же ячейки


table width="100%" border="0" class="catalog">
    <tr>
         <td><img src="images/katalog/samosval.png" alt="Самосвалы" /><p>Самосвалы </p><ul><li>MAN</li><li>MAZ</li></ul><
/td>
      <td><img src="images/katalog/ukladchiki.png" alt="Укладчики" /><p>Укладчики </p><ul><li>MAN</li></ul></td>
                                            <td><img src="images/katalog/katok.png" alt="Катки"/><p>Катки</p></td>
      <td><img src="images/katalog/tiagach.png" alt="Тягач" /><p>Тягачи</p></td>
                                      </tr>
</table>


вот Jquery который написал

jQuery(document).ready(function($) {    
        $('.catalog tr td ul').hide();
        
                $('.catalog tr td img').mouseover(function() {
                $('.catalog tr td ul:first').slideDown();
                });
        
        $('.catalog tr td img').mouseleave(function() {
                $('.catalog tr td ul:first').slideUp();
                });
        });


Жду подсказки, и в какую сторону копать ? как-то не нашел решения

Последний раз редактировалось Hol1killer, 17.07.2012 в 18:09.
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2012, 18:20
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Как можно использовать координаты синтетического события.
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2012, 18:38
Аспирант
Отправить личное сообщение для Hol1killer Посмотреть профиль Найти все сообщения от Hol1killer
 
Регистрация: 17.07.2012
Сообщений: 34

Прочитал тему 5 раз, что то я не догнал
там же вообще чистый javascript , а я на jquery, я не могу понять как сделать, что бы в набор попадала картинка нужной ячейки а не все картинки, или надо id надо каждой строке присваивать
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2012, 18:59
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Чичас изображу...
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2012, 19:12
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>

<table width="100%" border="0" class="catalog">
    <tr valign=top>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Самосвалы" /><p>Самосвалы </p><ul><li>MAN</li><li>MAZ</li></ul>
</td>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Укладчики" /><p>Укладчики </p><ul><li>MAN</li></ul>
</td>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Катки"/><p>Катки</p><ul><li>MAN</li></ul>
</td>
	<td><img src="http://s1.uploads.ru/i/d28Cu.gif" alt="Тягач" /><p>Тягачи</p><ul><li>MAN</li></ul>
</td>
    </tr>
</table>
<style type="text/css">
.catalog  td > ul{
  display:none;
  position:absolute;
  z-index:2;
  border:2px solid #F1F2EE;
  padding:4px;
}
</style>
<script type="text/javascript">
$(document).ready(function($) {    
        
                $('.catalog tr td img').mouseenter(function() {
                $(this).parent().find('ul').slideDown();

                }).mouseleave(function() {
                $(this).parent().find('ul').slideUp();
                });
});
</script>
Ответить с цитированием
  #6 (permalink)  
Старый 18.07.2012, 13:10
Аспирант
Отправить личное сообщение для Hol1killer Посмотреть профиль Найти все сообщения от Hol1killer
 
Регистрация: 17.07.2012
Сообщений: 34

Благодарю=)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Событие при наведение мыши, которое раскроет содержимое блока (элемента)... aklak Элементы интерфейса 3 27.03.2012 11:30
Нужен скрипт, подсвечивающий ссылку при наведение на картинку Vatrushka Общие вопросы Javascript 2 26.04.2011 09:02
Подбор варианта из списка select при наборе текста omvitamin Элементы интерфейса 6 04.04.2011 14:48
При наведение на картинку появляется текст Родион Работа 1 24.01.2011 17:14
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 23:14