Вытаскиваем значение атрибута alt="" у тега <img>

[ddale]

Привет.

Задача:

Курсор стилизован и имеет вот такой код:

<span id="cursor">
    <span></span>
    <p>Текст*</p>
</span>

Текст*:
Сюда мы будем помещать значение атрибута alt из тега img. При этом текст должен динамически меняться, в зависимости от того в какой зоне находится стрелка. Т.е. если стрелка в левой зоне (зона, кстати это просто зафиксированный тег <a></a>), то текст на указателе меняется на значение атрибута alt из картинки img_1.

Вот картинка для примера:



Вот как это работает сейчас:

<div class="bx-wrapper" style="width:1920px; position:relative;">
	<div class="bx-window" style="height:21px; width:1920px; position:relative; overflow:hidden;">
		<div id="pano" style="top: -31px; height: 1920px; visibility: visible; ">
			<div style="list-style: none; position: absolute; top: 0px; left: 0px; z-index: 98; opacity: 0; ">
				<img src="images/content/img_1.jpg" alt="Текст. Аврил">
			</div>
			<div style="list-style: none; position: absolute; top: 0px; left: 0px; z-index: 98; opacity: 0; ">
				<img src="images/content/img_2.jpg" alt="Космос. Текст прям чтоб длинный">
			</div>
			<div style="list-style: none; position: absolute; top: 0px; left: 0px; z-index: 99; opacity: 1; ">
				<img src="images/content/img_3.jpg" alt="А тут комната">
			</div>
		</div>
	</div>
	<a href="" class="bx-prev" style="display: none; "></a>
	<a href="" class="bx-next" style="display: none; "></a>
</div>

if ($("#pano div").css('z-index') == '99') {
        alt_attr = $(this).find('img').attr("alt");
        $('#cursor p').text(alt_attr);
    }

HTML формируется плагином bxslider.

Сейчас значение из атирибута берется только у одной картинки. Динамическое обновление не реализовано. Как его сделать?

[Deff]

ddale,
Эта тема не поможет? Обработка событий мыши при выделении области картинки (Возможно заинтересует определение координат курсора при нахожении над элементов - далее нун соотнести с текущими размерами - для определения лево -право

[ddale]

Нет. Я не понимаю как это может помочь. Я бы хотел узнать как из такой конструкции HTML извлекать alt у img при наведении либо на .bx-prev, либо на .bx-next. Причем, чтобы это было вполне универсально и при перелистывании картинок логика сохранялась.

1) Когда слайдер загрузился юзер видет первую картинку и текст на курсоре к этой картинке

2) Когда он навилит на крайнии области текст меняет

3) При клике на область измененный текст сохраняется и при выходе курсора из области

[Deff]

ddale,
поверх картинки поставить прозрачную таблу, с ее типоразмерами и левой правой ячейкой - клик по правой - одно действие - клик по левой - другое
для этого нужно их(картинку и таблу) обернуть в один div, таблу абсолютно спозиционировать и вытащить наверх(таблу ставим первой

[ddale]

Deff,
не пойдет?


перебираем все дивы (#pano div). засовываем в глобальную переменную значение получившееся при сравнении параметра z-index у этих самых дивов. сравнение идет в пользу большего значения.

пишем для событий:
вход в зону слайдера -- $('#look').mouseenter(function (){}); --
вход в зону .bx-prev -- $('.bx-next').mouseenter(function(){}); --
вход в зону .bx-next -- $('.bx-prev').mouseenter(function(){}); --
и соответственно по выходу из левой правой зон:
$('.bx-prev').mouseleave(function(){});
$('.bx-next').mouseleave(function(){});