Смена картинок
Здравствуйте, вопрос в следующем-имеется 5 картинок, расположенных вряд.
Нужно на клик по второй(третьей...) картинке менять ее вид на картинку с белой точкой, а первую-с черной(переход по страницам новостей).
<div id="button">
<div id="bt1"><img src="bt_wh.png"></div>
<div id="bt2"><img src="bt_blc.png"></div>
<div id="bt3"><img src="bt_blc.png"></div>
<div id="bt4"><img src="bt_blk.png"></div>
<div id="bt5"><img src="bt_blk.png"></div>
<div id="All_news"><a href="">All news →</a></div>
</div>
|
Простите, некорректно озаглавил тему. Впринцепе буду признателен просто за смену картинок(эффект переключения).
|
Кто вообще понял вопрос?
м.б. это надо? http://cssglobe.com/lab/easyslider1.7/03.html |
не совсем
пробовал так:
function chg(new_img) {
document.getElementById('bt1').className = '';
document.getElementById('bt2').className = '';
document.getElementById('bt3').className = '';
document.getElementById('bt4').className = '';
document.getElementById('bt5').className = '';
document.getElementById(new_img).className = 'active';
}
<div id="button">
<a href="javascript:chg('img1');" id="bt1" class="active"></a>
<a href="javascript:chg('img2');" id="bt2"></a>
<a href="javascript:chg('img3');" id="bt3"></a>
<a href="javascript:chg('img4');" id="bt4"></a>
<a href="javascript:chg('img5');" id="bt5"></a>
<div id="All_news"><a href="">All news →</a></div>
</div>
#bt1,#bt2,#bt3,#bt4,#bt5{
background:url("bt_blk.png");
float: left;
width: 14px;
height: 14px;
margin-right: 20px;
cursor: pointer;
}
#bt1.active,#bt2.active,#bt3.active,#bt4.active,#bt5.active{
background:url("bt_wh.png");
width: 14px;
height: 14px;
}
для начала нужно хотябы сделать смену картинок P.S. Я возможно запутал вас своим "смена картинок".Я имел ввиду не галерею, а именно кнопки. Рабочий |
РЕШЕНО
|
IvanM, возьмите за привычку описывать решение, а не просто писать "РЕШЕНО". Возможно, у кого-то будет подобный вопрос, а тут фигу.
|
Исправил код в своем посте. Просто ошибка детская даж стыдно что написал:D
|
| Часовой пояс GMT +3, время: 01:03. |