Текст при наведении на картинку
Здравствуйте.
Есть такой код: <div class="img1"></div> <div class="img2"></div> <div class="img3"></div> <div class="img4"></div> <div class="img5"></div> <div class="img6"></div> <div class="worktext"></div> Необходимо, чтобы при наведении на картинки в worktext отображался заданный для изображения текст. Как это реализовать? |
$('.img1').hover(function(){ $('.worktext').html('123kbnv kghkg'); }); И так для каждого. |
Цитата:
|
Цитата:
<div class="img1" data-text="text 1"></div> <div class="img2" data-text="text 1"></div> <div class="img3" data-text="text 1"></div> <div class="img4" data-text="text 1"></div> <div class="img5" data-text="text 1"></div> <div class="img6" data-text="text 1"></div> <div class="worktext"></div> $('div[class^=img]').hover(function(){ $('.worktext').html($(this).attr('data-text')); }, function(){ $('.worktext').html(''); }) |
Джон "Капитан" Воробей,
Можно, но не факт, что есть возможность атрибут новый вставить. У вас изящней и лаконичней, но менее универсально. ) Прсто насколько я знаю, зачастую подобные задачи для JS ставятся в случае, когда HTML код не так то легко и поправить. Я бы сделал это еще на этапе формирования хтмл кода в виде: <style> .title { position:relative(absolute); bottom:0px; display:none; } .img:hover + .title { display:block; } </style> <div class="img"></div> <div class="title"></div> ... <div class="img"></div> <div class="title"></div> Хотя можно добавить атрибут и с помощью JS, но как ни крути выйдет много строк... |
Цитата:
|
Lemme,
Есть у меня один знакомый, который клепает сайты на WP. На уровне PHP+HTML+CSS он бы решил эту задачу, а вот с JS у него туго. Я от него частенько подобные просьбы о помощи слышу. ) Потому и взял за посылку, что хтмл править нельзя. ))) |
nesnayka, если он знает html,css и еще любой серверный язык, то с простыми вещами он легко разберется с помощью документации=)
|
Lemme,
Ну вот не дается ему JS так просто, как дался РНР. )) |
nesnayka,
Низзя один и тот же код писать 1000000 раз, это нарушает принципы современного проектирования ПО (вообще любого). Если html изменить нельзя (конечно тяжело представить, но допустим), можно замутить что-нить вроде этого var data = [ { id:'1', text:'some text 1' }, { id:'2', text:'some text 2' }, { id:'3', text:'some text 3' } ]; $(document).ready(function(){ $('div[class^=img]').hover(function(){ var s = $(this).attr('class') var res = s.slice(3, 4); function fil(element){ return element.id == res } var val = data.filter(fil); $('.worktext').html(val[0].text) },function(){ $('.worktext').html(''); }); }); |
Джон "Капитан" Воробей,
может полноценный макет делать с run? |
Джон "Капитан" Воробей,
Интересно узнать у ТС (ясно, что человек делает только первые шаги), что для него понятней: код с соблюдением "правил проектирования" или шесть обработчиков .hover ? :) Вы ведь даете советы начинающим, а не пытаетесь улучшить качество кода согласно всем канонам программирования. Зачастую, для новичков код, написанный по этим канонам не просто непонятен, а и чреват тем, что человек потеряет тягу к программизму. Не забывайте, что для многих этот ресурс обучающий. |
Часовой пояс GMT +3, время: 20:16. |