Текст при наведении на картинку

[gtxtymt]

Здравствуйте.

Есть такой код:

<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 отображался заданный для изображения текст. Как это реализовать?

[nesnayka]

$('.img1').hover(function(){
  $('.worktext').html('123kbnv kghkg');
});

И так для каждого.

[gtxtymt]

И так для каждого.

Спасибо

[Джон "Капитан" Воробей]

И так для каждого.

Это жесть конечно. Как вариант так хотя бы

<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('');
})

[nesnayka]

Джон "Капитан" Воробей,
Можно, но не факт, что есть возможность атрибут новый вставить.
У вас изящней и лаконичней, но менее универсально. )
Прсто насколько я знаю, зачастую подобные задачи для 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]

Прсто насколько я знаю, зачастую подобные задачи для JS ставятся в случае, когда HTML код не так то легко и поправить.

Чаще всего - такие задачки ставятся, когда тот, кто ставит эту задачку, понятия не имеет - как ее решить лучше

[nesnayka]

Lemme,
Есть у меня один знакомый, который клепает сайты на WP. На уровне PHP+HTML+CSS он бы решил эту задачу, а вот с JS у него туго. Я от него частенько подобные просьбы о помощи слышу. )
Потому и взял за посылку, что хтмл править нельзя. )))

[Lemme]

nesnayka, если он знает html,css и еще любой серверный язык, то с простыми вещами он легко разберется с помощью документации=)

[nesnayka]

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('');              
  });
});