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

即可

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

＆＃13;

＆＃13;

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;
		}

＆＃13;

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%;
}

＆＃13;

<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()">

＆＃13;

＆＃13;

＆＃13;