WhiteHox WhiteHox - 23 days ago 8
CSS Question

JavaScript Photo Gallery

Am trying to build a photo gallery with javascript ony (no jQuery). Such that i hover one image and the image and alt text shows in an empty 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()">




I have tried different methods but succeeded in only the alt text

Answer

Just set the backgroundImage to previewPic.src

If you run the source code below, you can see that it works well.

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