|
как сделать ссылку у активной 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, время: 07:30. |
|