Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: для новичков > Помогите сделать смену border на javascript

Автор: verhmax 2.9.2012, 13:19

Добрый день. есть страница, на ней большая фотка, а под ней 4 фрагмента (маленькие фотки). при клике по маленькой фотке, она показывается на месте большой.
Вот код:

Код


 function setBigImage(foto) {
 document.getElementById("bigimg").src = foto.src;
 }

Код


 <img id = 'bigimg' src="img/bimg_79.jpg" border="1">

- это большая фотка

Код


 <img height='100' border=1 style = 'cursor: pointer;' onclick = 'setBigImage(this)' src='img/bimg_80.jpg'>
 <img height='100' border=1 style = 'cursor: pointer;' onclick = 'setBigImage(this)' src='img/bimg_81.jpg'>

- это фрагменты

Помогите сделать, чтоб при клике на маленькую фотку, цвет рамки border стал зеленым цветом.
Очень нужно, но не знаю как
Спасибо заранее за помощь!

Автор: prototype 2.9.2012, 21:44

Попробуйте изменить вашу функцию на следующую:

Код


function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    
    document.getElementById('container').getElementsByTagName('img').style.borderColor = 'black';
    foto.style.borderColor = 'green';
}

Только вместо document.getElementById('container') подставьте ссылку на контейнер в котором хранятся фрагменты (в вашем примере его не видно).

Автор: ksnk 2.9.2012, 22:02

getElementsByTagName('img') даст массив. Так что менять ранее установленные зеленые границы нужно бы в цикле.

Автор: prototype 2.9.2012, 22:27

Это был jquery-стайл smile

К хорошему быстро привыкаешь

Код


function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    
    var images = document.getElementById('container').getElementsByTagName('img');
    for (var i in images) {
        images[i].style.borderColor = 'black';
    }
    foto.style.borderColor = 'green';
}

Автор: verhmax 2.9.2012, 23:19

поменял функцию на первый вариант и на второй (ничего не изменяя в картинке) и не работает :(

Автор: ksnk 2.9.2012, 23:47

Код


function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    if(!!setBigImage.past) setBigImage.past.style.borderColor = 'black';
    setBigImage.past=foto;
    foto.style.borderColor = 'green';
}