передача значения alt из тега img при нажатии на маленькую картинку

rigoberto · August 2, 2012

Уважаемые программисты, помогите, пожалуйста!

у меня есть такая страница:

как делать средствами javascript так, чтобы при нажатии на маленькую картинку под большой картинкой появилось значение "alt" той картинки, на которую нажали? Заранее спасибо.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>картинки</title>

function setBigImage(foto) {

document.getElementById("bigimg").src = foto.src;

}

</script>

</head>

<body>

<div>

</p>

<tr>

<br><strong>animal</strong>

</td>

<br><strong>flower</strong>

</td>

<br><strong>space</strong>

</td>

</tr>

</table>

</div>

</body>

</html>

wildhind · August 2, 2012

Вам нужно прочитать один атрибут и установить значение другого атрибута.

Это методы getAttribute() и setAttribute() соответственно.

То есть, что-то в таком духе:


function setBigImage(foto) {
document.getElementById("bigimg").src = foto.src;
document.getElementById("bigimg").setAttribute("alt",foto.getAttribute("alt"))
}

но если совсем честно, не надо эти onclick. Это ж лишние нагромождения.

$(".sm12-center img").click(function(){$("#bigimg").attr({src:$(this).attr("src"),alt:$(this).attr("alt")})})

и всё.

moron · August 2, 2012

атрибут и установить значение другого атрибута

Установить? Атрибут, который отвечает за вывод текста под картинку? Разве такие есть? Мне кажется одними атрибутами тут не обойтись, да и устанавливать значения никаких атрибутов не надо. Достаточно получить атрибут alt и засунуть его в\под большую картинку. Примерно так:


/////////////////
////js script////
function transformAtr() {
//получаем элемент, в который будет
//выводиться текст из alt
var text = document.getElementById('description');
//элемент, в котором будут храниться
//маленькие картинки
var gallery = document.getElementById('gallery');
//получаем все элементы катинки, находящиеся
//в элементе обертки-галерее
var arrayImg = gallery.getElementsByTagName('img');
for(var i; i<arrayImg.legth; i++){
//получаем значение атрибута alt:
  arrayImg[i].onclick = function(x){
    var alt = this.getAttribute('alt');
    text.innerHTML = alt;
  }
}
////////////////////////////////////////////////////////////////////////
//кусок хтмл кода из первого поста, переделанный , но сохранивший идею//
<img id = 'bigimg' src = 'animal.jpg' height = '230' alt = 'animal' />
<p id='description'></p>
<div id='gallery'>
<img src = 'animal.jpg' width = '50' alt = 'animal'/> 
<img src = 'flower.jpg' width = '50 alt = 'flower'/> 
<img src = 'space.jpg' width = '50' alt = 'space'/> 
</div>

Edited August 2, 2012 by moron

wildhind · August 3, 2012

Установить? Атрибут, который отвечает за вывод текста под картинку?

ах, простите, невнимательно прочиталось.

Ну да всё равно принцип тот же.

nerv · August 3, 2012

moron,

for(var i; i<arrayImg.legth; i++){ // var i --> i++ --> undefined++

Edited August 3, 2012 by nerv

wildhind · August 3, 2012

moron,

for(var i; i<arrayImg.legth; i++){ // var i --> i++ --> undefined++

ну здесь наверняка просто опечатка.

Хотя может быть и принципиальной ошибкой.

Но интересно, почему в таких случаях не использовать цикл for(i in arrayImg)?

Viper · August 3, 2012

for(var i; i<arrayImg.legth; i++){
...
}

Лучше делать так:

for(var i = arrayImg.length; i--{
...
}

цикл будет быстрее отрабатывать

Edited August 3, 2012 by Viper

nerv · August 3, 2012

Но интересно, почему в таких случаях не использовать цикл for(i in arrayImg)?

будет "черпать" из прототипа(ов)

Лучше делать так:
for(var i = arrayImg.length; i--{
...
}
цикл будет быстрее отрабатывать

var x = arrayImg.length;

while( --x >= 0 ) {
}

Sign In

передача значения alt из тега img при нажатии на маленькую картинку

Question

rigoberto

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

wildhind

Link to comment

Share on other sites

moron

Link to comment

Share on other sites

wildhind

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

wildhind

Link to comment

Share on other sites

Viper

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information