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

[verhmax]

Добрый день. есть страница, на ней большая фотка, а под ней 4 фрагмента (маленькие фотки). при клике по маленькой фотке, она показывается на месте большой.
Вот код:
<script type="text/javascript">
function setBigImage(foto) {
document.getElementById("bigimg").src = foto.src;
}
</script>

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

[lord2kim]

verhmax, задайте картинкам-фоткам одинаковый атрибут name (например, img) и

function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    for (i=0; i < document.getElementsByName("img").length; i++) {
        document.getElementsByName("img").style.border = "1px solid black";
    }
    foto.style.border = "2px solid green";
}

[verhmax]

заменил функцию на Вашу, картинкам присвоил вот так:
<img mane='img' height='100' border=1 style = 'cursor: pointer;' onclick = 'setBigImage(this)' src='img/bimg_80.jpg'>
не работает. если не присваивать картинкам name='img' то работает, выставляет бордер, но не убирает при клике по другой картинке

[lord2kim]

заменил функцию на Вашу, картинкам присвоил вот так:
<img mane='img' height='100' border=1 style = 'cursor: pointer;' onclick = 'setBigImage(this)' src='img/bimg_80.jpg'>
не работает. если не присваивать картинкам name='img' то работает, выставляет бордер, но не убирает при клике по другой картинке

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

не mane, а name и свойство border занесите в style, можно вместе с height или отдельно class сделайте

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

<style>
.img { width: 75px; height: 75px; border: 1px solid black; cursor: pointer }
</style>
<script>
function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
    for (i=0; i < document.getElementsByClassName("img").length; i++) {
        document.getElementsByClassName("img")[i].style.border = "1px solid black";
    }
    foto.style.border = "2px solid red";
}
</script>
<div style="width: 100%; text-align: center;"><img src="http://img-fotki.yandex.ru/get/6608/158970486.5/0_a16f8_10f47143_" id="bigimg"></div><br><br>
<img src="http://img-fotki.yandex.ru/get/6608/158970486.5/0_a16f8_10f47143_L" class="img" onClick="setBigImage(this)">
<img src="http://img-fotki.yandex.ru/get/6507/158970486.5/0_a16f9_3868a150_L" class="img" onClick="setBigImage(this)">
<img src="http://img-fotki.yandex.ru/get/6409/158970486.5/0_a16fa_81298170_L" class="img" onClick="setBigImage(this)">

лучше при ошибке выкладывайте весь код, но без лишних данных

[lord2kim]

удалено

[Positive_fun]

такие штуки легче всего писать с помощью классов и прописи нужного вам оформления в таблице стилей, то-есть происходит клик по картинке ей присваивается класс например .border_img а для етого класа уже прописано оформление в таблице стилей, когда происходит клик по другой картинке оно перебирает все картинки и ставит имя класса пустой строкой или можно другой клас присвоить или удалить. Ето особенно удобно если прописывать не только рамку выделенной картинке но и если добавлять другое оформление типо легкой прозрачности то не надо в ява скрипте это все прописывать

.hover_img_galery {
	border:1px solid #000000;
	opacity:0.4;
	filter:alpha(opacity=40);
}

<div id="small">
<a href="images/gal/1.jpg"><img src="images/gal/1_mini.jpg" alt="Миниатюра 1" /></a>
<a href="images/gal/2.jpg"><img src="images/gal/2_mini.jpg" alt="Миниатюра 2" /></a>
<a href="images/gal/3.jpg"><img src="images/gal/3_mini.jpg" alt="Миниатюра 3" /></a>
<a href="images/gal/4.jpg"><img src="images/gal/4_mini.jpg" alt="Миниатюра 4" /></a>
</div>

var iddd = document.getElementById('small'),
	imgG = iddd.getElementsByTagName('img'),
	imgL = imgG.length,
	j;
		for(j=0; j < imgL; j += 1) { 
			imgG[j].onclick = function() {
				for(var k=0; k < imgL; k += 1) {
					imgG[k].className = '';
				}
				this.className = 'hover_img_galery';
			};
		};

и еще одно прописывать стили и скрипт прямо в теге html это не правильно это не считается хорошим тоном для программиста и не соответствует идее ненавязчивого ява скрипта не сочтите за дерзость просто искренний совет, я не мега программист но может это вам поможет. Надеюсь этот пример вам поможет или по крайней мере натолкнет на какуюто другую идею.