Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.08.2012, 13:14
Интересующийся
Отправить личное сообщение для IggyTot Посмотреть профиль Найти все сообщения от IggyTot
 
Регистрация: 15.07.2012
Сообщений: 28

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

нужно все картинкам задать ссылки, но чтобы ссылка срабатывала только у активной картинки.
Подскажите пожалуйста как это сделать, не получается.
Ответить с цитированием
  #2 (permalink)  
Старый 08.08.2012, 15:09
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

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

Последний раз редактировалось Deff, 08.08.2012 в 15:11.
Ответить с цитированием
  #3 (permalink)  
Старый 08.08.2012, 15:21
Интересующийся
Отправить личное сообщение для IggyTot Посмотреть профиль Найти все сообщения от IggyTot
 
Регистрация: 15.07.2012
Сообщений: 28

часть проблемы этим решена.
не активные картинки не работают ссылками.
но активная тоже.
Ответить с цитированием
  #4 (permalink)  
Старый 08.08.2012, 15:27
Аспирант
Отправить личное сообщение для mullih Посмотреть профиль Найти все сообщения от mullih
 
Регистрация: 05.08.2012
Сообщений: 77

IggyTot,
у deff рабочий код, приведите какой браузер и полный html код
Ответить с цитированием
  #5 (permalink)  
Старый 08.08.2012, 15:33
Интересующийся
Отправить личное сообщение для IggyTot Посмотреть профиль Найти все сообщения от IggyTot
 
Регистрация: 15.07.2012
Сообщений: 28

браузер - 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>
Ответить с цитированием
  #6 (permalink)  
Старый 08.08.2012, 15:34
Интересующийся
Отправить личное сообщение для IggyTot Посмотреть профиль Найти все сообщения от IggyTot
 
Регистрация: 15.07.2012
Сообщений: 28

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

http://files.mail.ru/HO2NKU
тут скрипт
Ответить с цитированием
  #7 (permalink)  
Старый 08.08.2012, 15:41
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<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, 09.08.2012 в 13:18.
Ответить с цитированием
  #8 (permalink)  
Старый 08.08.2012, 15:46
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

IggyTot, http://javascript.ru/formatting
Ответить с цитированием
  #9 (permalink)  
Старый 08.08.2012, 15:54
Аспирант
Отправить личное сообщение для mullih Посмотреть профиль Найти все сообщения от mullih
 
Регистрация: 05.08.2012
Сообщений: 77

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

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


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

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

ну и четвертое в приведенном вами html нету ниодной img с классом selectedItem
Ответить с цитированием
  #10 (permalink)  
Старый 08.08.2012, 22:31
Интересующийся
Отправить личное сообщение для IggyTot Посмотреть профиль Найти все сообщения от IggyTot
 
Регистрация: 15.07.2012
Сообщений: 28

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

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


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

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

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

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать что бы при регистрации человека на моем сайте у него не появлялось... drunkwolfs Общие вопросы Javascript 2 07.08.2012 10:58
Как сделать такую фичу? dotwatt Элементы интерфейса 7 20.07.2012 10:51
Как сделать смену текста по клику на ссылку? goooooch Общие вопросы Javascript 4 09.07.2012 17:04
Как сделать загрузку изображения аля вконтакте? OklickSpb Общие вопросы Javascript 4 31.03.2012 17:12
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19