JavaScript照片库

Question

我试图用javascript ony建立一个照片库（没有jQuery）。 这样我悬停一个图像，图像和alt文本显示在空div中。

 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 = ""; function upDate(previewPic){ document.getElementById('image').innerHTML = previewPic.alt; document.getElementById('image').style.backgroundImage = bgImages_1; } function unDo(undotext){ document.getElementById('image').innerHTML = undoAlt; document.getElementById('image').style.background = undoText; } 

 body{ margin: 2%; border: 1px solid black; background-color: #b3b3b3; } #image{ line-height:650px; width: 575px; height: 650px; border:5px solid black; 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{ width:10%; margin-left:17%; border: 10px solid black; } img{ width:95%; } 

 <div id = "image"> Hover over an image below to display here. </div> <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()"> <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()"> <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()"> 

我尝试了不同的方法，但只成功了alt文本

Answer 1

只需将backgroundImage设置为previewPic.src即可

如果您运行下面的源代码，您会发现它运行良好。

 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 = ""; function upDate(previewPic){ document.getElementById('image').innerHTML = previewPic.alt; document.getElementById('image').style.backgroundImage = 'url('+previewPic.src+')'; } function unDo(undotext){ document.getElementById('image').innerHTML = undoAlt; document.getElementById('image').style.background = undoText; } 

 body{ margin: 2%; border: 1px solid black; background-color: #b3b3b3; } #image{ line-height:650px; width: 575px; height: 650px; border:5px solid black; 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{ width:10%; margin-left:17%; border: 10px solid black; } img{ width:95%; } 

 <div id = "image"> Hover over an image below to display here. </div> <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()"> <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()"> <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()">