1
Я пытаюсь построить фотогалерею с помощью javascript ony (no jQuery). Таким образом, я нахожу один образ, а изображение и текст alt отображаются в пустом div.JavaScript Фотогалерея
var bgImages_1 = 'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg)';
var bgImages_2 = 'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG)';
var bgImages_3 = 'url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg)';
backImages = bgImages_1 && bgImages_2 && bgImages_3;
var undoAlt = "Hover over an image below to display here.";
var undoText = "";
\t \t function upDate(previewPic){
\t \t \t document.getElementById('image').innerHTML = previewPic.alt;
document.getElementById('image').style.backgroundImage = bgImages_1;
}
\t \t function unDo(undotext){
\t \t \t document.getElementById('image').innerHTML = undoAlt;
document.getElementById('image').style.background = undoText;
\t \t }body{
\t \t margin: 2%;
\t \t border: 1px solid black;
\t \t background-color: #b3b3b3;
}
#image{
line-height:650px;
\t \t width: 575px;
height: 650px;
\t \t border:5px solid black;
\t \t margin:0 auto;
background-color: #8e68ff;
background-image: url('');
background-repeat: no-repeat;
color:#FFFFFF;
text-align: center;
background-size: 100%;
margin-bottom:25px;
font-size: 150%;
}
.preview{
\t \t width:10%;
\t \t margin-left:17%;
border: 10px solid black;
}
img{
\t \t width:95%;
}<div id = "image">
\t \t Hover over an image below to display here.
\t </div>
\t
\t <img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
\t
\t <img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
\t
\t <img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">
'document.getElementById ('изображения') style.backgroundImage = bgImages_1;.' Вы всегда использовать первое изображение с этим, вместо этого вы должны проверить, какой образ парил и дисплей вон тот. –
Как это можно сделать. Поскольку я не могу получить это право –