Нажмите «Эскиз», чтобы изменить основное изображение?

После изучения JS около месяца и завершения 4 курсов я все еще не могу разобраться, как изменить изображение при нажатии на миниатюру! То, что я хочу сделать, просто, я просто хочу изменить основное изображение при нажатии на миниатюру! В этом примере есть два уменьшенных изображения в div и основное изображение над ними. Я просто хочу изменить основной образ при нажатии на миниатюру. Я знаю, что это DOM Manipulation и думаю, что это: document.getElementById .....?Нажмите «Эскиз», чтобы изменить основное изображение?

Я сделал небольшую страницу, чтобы я мог узнать/попробовать разные вещи и, наконец, отказаться и просить о помощи! Код выглядит следующим образом:

#MainContainer { 
position: relative; 
margin:0px auto; 
width: 500px; 
height: 400px; 
border: 1px solid black; 
} 
#MainImage { 
position: absolute; 
top: 10px; 
left: 50px; 
width: 398px; 
height: 265px; 
background: url(MainImage01.jpg); 
border: 1px solid black; 
} 
#TNBodyContainer { 
position: absolute; 
top: 290px; 
left: 100px; 
border: 1px solid black; 
width: 268px; 
height: 88px; 
} 
#TNOne { 
position: relative; 
width: 133px; 
height: 88px; 
background: url(SmallImage01.jpg); 
} 
#TNTwo { 
position: relative; 
left:135px; 
width: 133px; 
height: 88px; 
background: url(SmallImage02.jpg); 
} 

<body> 
<div id="MainContainer"> 
    <div id="MainImage"></div> 
    <div id="TNBodyContainer"> 
     <div id="TNOne"> 
      <div id="TNTwo"></div> 
     </div> 
    </div>

Благодарим за помощь.

Маргит

источник

2013-03-22 Margate

Вы должны добавить некоторые скрипты, чтобы изменить изображение, когда любой из миниатюр щелкнул. Эта функция вызывается при загрузке страницы. Измените имена изображений в соответствии с требованиями. Это должно быть размещено в разделе html-страницы.

<script> 
window.onload = function() { 
     var mainImg = document.getElementById('Main'); 

     document.getElementById('TNOne').onclick = function() { 
       mainImg.src = 'main1.jpg'; 
       //alert('one clicked'); 
     }; 
     document.getElementById('TNTwo').onclick = function() { 
       mainImg.src = 'main2.jpg'; 
       //alert('two clicked'); 
     }; 
}; 
</script>

Две дивы миниатюры стали <img> метки с одинаковыми идентификаторами. Также определяется основной <img> (с id = "Main"). Теперь элементы можно щелкнуть.

<div id="MainContainer"> 
    <div id="MainImage"> 
     <img id="Main" src="MainImage01.jpg"</img> 
    </div> 
    <div id="TNBodyContainer"> 
     <img id="TNOne" src="thumb1.jpg"></img> 
     <img id="TNTwo" src="thumb2.jpg"></img> 
    </div> 
</div>

Наконец CSS для миниатюр, здесь поплавок используется для хранения миниатюр в одной и той же линии в пределах TNBodyContainer дел.

TNOne { 
width: 133px; 
height: 88px; 
float:left; 
} 
#TNTwo { 
width: 133px; 
height: 88px; 
float:left; 
}

источник

2013-03-22 00:52:24 suspectus

Большое спасибо suspectus.Очень удобно для меня. Я сохраню код, как мне нужно учиться на нем. Очень приятно, чтобы вы мне помогли:) – Margate

@Margate Нет проблем - было весело дать ответ. Если подумать, что Даниэль и/или мое решение предоставлены, это принесет пользу, вы всегда можете проявить свою признательность, предоставив нам голосование. – suspectus

Для изменения изображения в CSS свойства фона, вам нужно использовать

document.getElementById("MainImage").style.background

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

document.getElementById("TNOne").addEventListener("click", function (event) { 
      setImage(event); 
     }, false); 
     document.getElementById("TNTwo").addEventListener("click", function (event) { 
      setImage(event); 
     }, false); 

    }

Они оба вызывают той же функции, но с событием можно увидеть, какой из них «щелкнул» с помощью «event.target.id».

Затем вы можете решить, что вы хотите сделать, например, оператор switch. в основном говоря: if event.target.id == "TNOne".

Вы можете увидеть все это я сделал вам скрипку: http://jsfiddle.net/djwave28/32pQD/3/

Есть некоторые незначительные изменения в вашем HTML и CSS тоже.

источник

2013-03-22 01:08:20 Daniel

Большое спасибо Даниэлю за ответ и время, которое потребовалось для этого в jsfiddle. Я скопировал код и буду использовать его для изучения/решения моей проблемы! Нужно делать больше курсов! – Margate

Вы очень приветствуетесь :-) ... Было это сделано, и для изучения требуется время. Решение, предлагаемое @suspectus, может работать одинаково. Дополнительную информацию об этом здесь: http://stackoverflow.com/questions/6348494/addeventlistener-vs-onclick Удачи! – Daniel

Нажмите «Эскиз», чтобы изменить основное изображение?

ответ

Смежные вопросы