|
как сделать ссылку у активной 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> |
|
<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>
|
IggyTot, http://javascript.ru/formatting
|
в вашем примере несколько моментов
первое, лучше обворачивать jq код лучше обворачивать в
$(document).ready(function(){});
второе если coverscroll устанавливает class для активного элемента то он должен идти перед назначения колбэк функции которая обрабатывает нужную картинку третье если класс меняется то в данном случае надо после этого прогонять опять селекторы с операциями ну и четвертое в приведенном вами html нету ниодной img с классом selectedItem |
Цитата:
в моем html нет класса selectedItem, он прописывается из скрипта. |
| Часовой пояс GMT +3, время: 23:43. |
|