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)

IggyTot 08.08.2012 13:14

как сделать ссылку у активной 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.

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

Deff 08.08.2012 15:09

<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 08.08.2012 15:21

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

mullih 08.08.2012 15:27

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

IggyTot 08.08.2012 15:33

браузер - 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>

IggyTot 08.08.2012 15:34

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

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

bes 08.08.2012 15:41

<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>

bes 08.08.2012 15:46

IggyTot, http://javascript.ru/formatting

mullih 08.08.2012 15:54

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

первое, лучше обворачивать jq код лучше обворачивать в
$(document).ready(function(){});


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

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

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

IggyTot 08.08.2012 22:31

Цитата:

Сообщение от mullih (Сообщение 195640)
в вашем примере несколько моментов

первое, лучше обворачивать jq код лучше обворачивать в
$(document).ready(function(){});


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

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

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

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

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


Часовой пояс GMT +3, время: 07:30.