Javascript-форум - как сделать ссылку у активной img

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - как сделать ссылку у активной img (https://javascript.ru/forum/dom-window/30557-kak-sdelat-ssylku-u-aktivnojj-img.html)

как сделать ссылку у активной img

Доброго дня.
такая проблема. есть слайдер:

<div id="slider">
<img title="title #1" src="images/1.jpg" />
<img title="title #2" src="images/2.jpg" />
<img title="title #3" src="images/3.jpg" />
<img title="title #4" src="images/4.jpg" />
<img title="title #5" src="images/5.jpg" />
<img title="title #6" src="images/6.jpg" />
<img title="title #7" src="images/7.jpg" />
<img title="title #1" src="images/1.jpg" />
<img title="title #2" src="images/2.jpg" />
<img title="title #3" src="images/3.jpg" />
<img title="title #4" src="images/4.jpg" />
</div>

активной картинке в скрипте задается класс selectedItem.

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

<style type="text/css">
 a img.active {
  border:1px solid red;
 }
</style>

<div id="slider">
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img class="selectedItem" title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 <a href="http://forum.mybb.ru/"><img title="title #1" src="images/1.jpg" /></a>
 </div>


<script type="text/javascript">

  $("#slider a img").parent().attr('onclick','return false')
  $("#slider a img.selectedItem").parent().removeAttr('onclick')

</script>

часть проблемы этим решена.
не активные картинки не работают ссылками.
но активная тоже.

IggyTot,
у deff рабочий код, приведите какой браузер и полный html код

браузер - ff

<!DOCTYPE html>
<html>
<head>
<title>Титул - группа компаний</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.coverscroll.min.js"></script>
</head>
<body>
<hr size="4px" color="#000" width="100%"/>
<div id="header">
<div class="all">
<a href="#"><img src="images/logo.png" height="95px"></a>
<div id="headcont">
<ul>
<li><a href="#">главная</a></li>
<li><a href="#">новости</a></li>
<li><a href="#">контактная информация</a></li>
</ul>
<div id="contacts">

</div>
</div>
</div>
</div>
<div id="container">
<div class="all">
<div id="left">
<div id="blockl1">
<ul>
<li><a href="#">Главная</a></li>
<li><a href="#">Недвижимость</a></li>
<li><a href="#">Автомобили</a></li>
<li><a href="#">Заказ запчастей</a></li>
<li><a href="#">Юридисечкие услуги</a></li>
<li><a href="#">Уборка помещеий</a></li>
<li><a href="#">Новости</a></li>
<li><a href="#">Контакты</a></li>
</ul>
</div>
<div id="blockl3">
<h2>Недвижимость</h2>
<ul>
<li><a href="#">Дом 1<img src="images/1.jpg" width="150px"/></a></li>
<li><a href="#">Дом 2<img src="images/2.jpg" width="150px"/></a></li>
<li><a href="#">Дом 3<img src="images/3.jpg" width="150px"/></a></li>
</ul>
</div>
<div id="blockl2">
<h2>Реклама</h2>
<ul>
<li><a href="#">Здесь может быть Ваша реклама<img src="images/1.jpg" width="150px"/></a></li>
<li><a href="#">Здесь может быть Ваша реклама<img src="images/1.jpg" width="150px"/></a></li>
</ul>
</div>
</div>
<div id="main">
<div id="slider">
<a href="#"><img title="title #1" src="images/1.jpg" /></a>
<a href="#"><img title="title #2" src="images/2.jpg" /></a>
<a href="#"><img title="title #3" src="images/3.jpg" /></a>
<a href="#"><img title="title #4" src="images/4.jpg" /></a>
<a href="#"><img title="title #5" src="images/5.jpg" /></a>
<a href="#"><img title="title #6" src="images/6.jpg" /></a>
<a href="#"><img title="title #7" src="images/7.jpg" /></a>
<a href="#"><img title="title #1" src="images/1.jpg" /></a>
<a href="#"><img title="title #2" src="images/2.jpg" /></a>
<a href="#"><img title="title #3" src="images/3.jpg" /></a>
<a href="#"><img title="title #4" src="images/4.jpg" /></a>
</div>
<script type="text/javascript">
$("#slider a img").parent().attr('onclick','return false')
$("#slider a img.selectedItem").parent().removeAttr('onclick')
</script>
<script>
$('#slider').coverscroll();
</script>
<div id="h1"><h1>Главная страница</h1></div>
<div id="content">
<div id="contenthead">
Добро пожаловать на наш сайт
</div>
</div>
<div id="right">
<div id="blockr1">
<h2>Партнеры</h2>
<ul>
<li><a href="#">Партнер номер 1</a></li>
<li><a href="#">Партнер номер 2</a></li>
<li><a href="#">Партнер номер 3</a></li>
<li><a href="#">Партнер номер 4</a></li>
<li><a href="#">Партнер номер 5</a></li>
<li><a href="#">Партнер номер 6</a></li>
<li><a href="#">Партнер номер 7</a></li>
<li><a href="#">Партнер номер 8</a></li>
</ul>
</div>
<div id="blockr2">
<h2>Автомобили</h2>
<ul>
<li><a href="#">Car 1<img src="images/1.jpg" width="150px"/></a></li>
<li><a href="#">Car 2<img src="images/2.jpg" width="150px"/></a></li>
<li><a href="#">Car 3<img src="images/3.jpg" width="150px"/></a></li>
</ul>
</div>
<div id="blockr3">
<h2>Реклама</h2>
<ul>
<li><a href="#">Здесь может быть Ваша реклама<img src="images/1.jpg" width="150px"/></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div class="all">
<div id="foo1">
<h3>ООО "ТИТУЛ ШРУПП" 2012</h3>
<address>
Наш адрес:<br/>

Телефоны:<br/>

</address>
</div>
<div id="foo2">
<h3>У Вас есть вопросы? Напишите нам!</h3>
</div>
<div id="foo3">
<h3>Специальное предложение</h3>
</div>
</div>
</div>
</body>
</html>

может конфликт со скриптом?

http://files.mail.ru/HO2NKU
тут скрипт

<div id="slider">
	<img title="title #0" class="selectedItem" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" />
	<img title="title #1" src="images/1.jpg" />
	<img title="title #2" src="images/2.jpg" />
	<img title="title #3" src="images/3.jpg" />
	<img title="title #4" src="images/4.jpg" />
	<img title="title #5" src="images/5.jpg" />
	<img title="title #6" src="images/6.jpg" />
	<img title="title #7" src="images/7.jpg" />
	<img title="title #1" src="images/1.jpg" />
	<img title="title #2" src="images/2.jpg" />
	<img title="title #3" src="images/3.jpg" />
	<img title="title #4" src="images/4.jpg" />
</div>

<script>
window.onload = function () {
	var div = document.getElementById('slider');
	mas = [//загоняете сюда адреса ссылок
		'http://javascript.ru',
	];
	
	function index(elem) {
		var elems = elem.parentNode.children; 
		var len = elems.length;
		for (var i = 0; i < len; i++) {
			if (elem == elems[i]) {
				return i;
			}
		}
	}

	div.onmousedown = function (e)  {
		e = e || event;
		var target = e.target || e.srcElement;
		var a = target.parentNode;
		if (a.tagName != 'A') {
			var num = index(target); 
			var a = document.createElement('a');
			div.insertBefore(a, target);
			a.appendChild(target);
		} else {
			var num = index(a);
		}
		if (target.className == 'selectedItem') {
			a.href = mas[num];
			a.click();
		} else {
			a.href = '#';
		}
	}
	
}
</script>

в вашем примере несколько моментов

первое, лучше обворачивать jq код лучше обворачивать в

$(document).ready(function(){});

второе если coverscroll устанавливает class для активного элемента то он должен идти перед назначения колбэк функции которая обрабатывает нужную картинку

третье если класс меняется то в данном случае надо после этого прогонять опять селекторы с операциями

ну и четвертое в приведенном вами html нету ниодной img с классом selectedItem

Цитата:

Сообщение от mullih (Сообщение 195640)

в вашем примере несколько моментов

первое, лучше обворачивать jq код лучше обворачивать в

$(document).ready(function(){});

подскажите пожалуйста как прогонять снова селекторы с операциями?

в моем html нет класса selectedItem, он прописывается из скрипта.

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

function(){
  $("#slider a img").parent().attr('onclick','return false')
  $("#slider a img.selectedItem").parent().removeAttr('onclick')
}

у вас работает данный пример?
у меня почему-то нет(

у меня нет к примеру плагина jquery.coverscroll да и картинок нет, если вы выложите вашу страницу куданибудь и дадите ссылку то мы сможем более предметно поговорить

конечно
http://titul.my1.ru/

IggyTot, объясните поподробнее, по какому принципу идёт назначение класса selectedItem

картинка которая в центре, ей задается данный класс.
в скрипте я не разобрался, ибо не про.

<script type="text/javascript">
$().ready(function(){
 var scrol = $('#slider').coverscroll();
 scrol.movecallback = function(){
  $("#slider a img").parent().attr('onclick','return false')
  $("#slider a img.selectedItem").parent().removeAttr('onclick')
 };
});
</script>

вроде получится

у картинок не активных при клике срабатывает ссылка, а у активной нет.

напарник справился. если интересно гляньте там
http://titul-group.com/

Цитата:

Сообщение от IggyTot

напарник справился. если интересно гляньте там
http://titul-group.com

да, он молодец, сначала ссылки назначаются, а потом работают все

да уже заметили)))

Цитата:

Сообщение от bes (Сообщение 195834)

да, он молодец, сначала ссылки назначаются, а потом работают все

ну а что же делать?(

IggyTot,
А что не так ? (Не вкурил неправильность текущего

Цитата:

Сообщение от IggyTot

ну а что же делать?(

ну class="selectedItem" как я понимаю, у вас нормально назначается
ну можете воспользоваться моим решением, загоняете все адреса ссылок в массив (теги ссылок соответственно убираете)
значения сейчас подправлю, если не понимаете как работает

Цитата:

Сообщение от bes (Сообщение 195864)

буду ОЧЕНЬ благодарен)):dance:

Цитата:

Сообщение от Deff (Сообщение 195862)

IggyTot,
А что не так ? (Не вкурил неправильность текущего

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

на сайте скрипт немного изменен. вот оригинал
http://files.mail.ru/HO2NKU

IggyTot,
Вернитесь к Вашему первоначальному Варианту скрипта (на этап перед созданием темы в топике)
Поставьте перед </body>

<script type="text/javascript">
 function  TstLink (a){
   if($(a).find('img').hasClass('selectedItem')) return true;
   return false;
 }
$(document).ready(function(){
  $("#slider a img").parent().attr('onclick','return TstLink(this)')

});
</script>

Цитата:

Сообщение от Deff (Сообщение 195876)

вообще ссылки не работают((

между head и body вставлял и в body. зачем кстати так делать? на юкозе это иногда помогает, если их cms конфликтует со скриптом.

IggyTot,
Перед тегом закрытия body

Цитата:

Сообщение от IggyTot

между head и body вставлял и в body

не между, а в head,
чтобы скрипт работал, то с чем он будет работать и сам скрипт должны быть загружены и готовы к работе: скрипт помещают после элементов, с которыми будут работать (или вообще в конец документа), в head - раньше всех сам скрипт будет готов к работе, есть разные события проверки загрузилось или нет, $(document).ready - DOM готов, разные onload-ы проверяют, загрузилось или нет

Я лично вообще никаких действий на сайте http://titul-group.com/ - не вижу - если б увидел - подсказал что поправить - а так чел сам пусть мучается

Цитата:

Сообщение от Deff

ну можно подсказать, что для того, чтобы ссылка не работала, надо ей обработчик onclick="return false" приделывать, а не картинке внутри неё, в этом видимо и проблема

bes,
Проблема в том - что скрипт не восстановлен к исходному - где никаких действий со ссылками не было и они все кликались

а далее нун, - выданный костыль в сообщении №29 вставить в конец страницы

я на компе с исходными пробую. и в head ставил и в конец....вообще не срабатывают ссылки

IggyTot,
Выдайте инет-страницу
1. Не ставьте никаких добавок - с самым изначальным Вашим скрптом - ссылки должны кликацо все
2. Ставите в конец страницы костыль - из поста 29