VPF::Помогите сделать смену border на javascript

verhmax

Дата 2.9.2012, 13:19 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 2.9.2012

Репутация: нет
Всего: нет

Добрый день. есть страница, на ней большая фотка, а под ней 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 стал зеленым цветом.
Очень нужно, но не знаю как
Спасибо заранее за помощь!

Это сообщение отредактировал(а) Aliance - 3.9.2012, 09:28

prototype

Дата 2.9.2012, 21:44 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 19.7.2010

Репутация: нет
Всего: нет

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

Код


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 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

prototype

Дата 2.9.2012, 22:27 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 24
Регистрация: 19.7.2010

Репутация: нет
Всего: нет

Это был 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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 2.9.2012

Репутация: нет
Всего: нет

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

ksnk

Дата 2.9.2012, 23:47 (ссылка)

(голосов:1)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Код


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

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »