Reputation: 3183
I need to create simple photo gallery with JavaScript. My code doesn't works
function upDate(previewPic){
document.getElementById('image').style.backgroundImage = "url('previewPic.src')";
document.getElementById('image').innerHTML = previewPic.alt;
In this function I should
change the URL for the background image of the div with the id="image"
to the source file of the preview image
HTML code:
<body>
<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()">
Upvotes: 1
Views: 10439
Reputation: 1
function upDate(previewPic){
document.getElementById('image').style.backgroundImage =
"url('" +previewPic.src + "')";
document.getElementById('image').innerHTML = previewPic.alt;
}
function unDo(X){
document.getElementById('image').style.backgroundImage = "url('')";
document.getElementById('image').innerHTML = "Hover over an image
below to display here";
}
Upvotes: 0
Reputation: 11
function upDate(previewPic){
document.getElementById('image').style.backgroundImage="url('" + previewPic.src + "')";
document.getElementById('image').innerHTML=previewPic.alt;
}
Upvotes: 1
Reputation: 910
function upDate(previewPic){
var src = previewPic.getAttribute("src");
var alt = previewPic.getAttribute("alt");
document.getElementById('image').style.backgroundImage = "url('" + src + "')";
document.getElementById('image').innerHTML = alt;
}
function unDo(){
document.getElementById('image').style.backgroundImage = "none";
document.getElementById('image').innerHTML = "Hover over an image below to display here";
}
Upvotes: 0
Reputation: 31
function upDate(previewPic){
var src = previewPic.getAttribute( "src" );
var alt = previewPic.getAttribute( "alt" );
document.getElementById('image').style.backgroundImage = "url('" + src + "')";
document.getElementById('image').innerHTML = alt;
}
function unDo(X){
X = document.getElementById('image');
X.style.backgroundImage = "url('')";
document.getElementById('image').innerHTML = "Hover over an image below to display here";
}
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%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
</head>
<body>
<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()">
</body>
</html>
Upvotes: 3
Reputation: 44086
I made a demo with the intent to show what you needed corrected and I kept adding, sorry. You'll find the recommended changes below. The reason why the images do not match what's hovered on is because the source of the images are dynamic. It'll function properly with your static images.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>34516675</title>
<style>
section { padding: 10%; }
figure { margin: 0 auto; }
#frame { background-image: url('data:image/gif; base64,R0lGODlhAQABAAAAACwAAAAAAQABAAA='); background-repeat:no-repeat; background-clip:border-box; background-size:contain; width: 480px; height: 270px; border: 1px solid blue; margin: 0 auto; }
.preview { cursor:pointer; }
figcaption{ text-align: center; font: small-caps 400 16px/1.45 "Palatino Linotype"; }
#gallery { width: 490px; }
</style>
</head>
<body>
<section>
<figure>
<div id="frame"></div>
<figcaption id="caption"></figcaption>
</figure>
<figure id="gallery">
<figcaption>Hover over an image below to display above.</figcaption>
<img class="preview" id="pic1" alt="Styling with a Bandana" src="https://placeimg.com/160/90/tech" onmclick="upDate(1)">
<img class="preview" id="pic2" alt="With My Boy" src="https://placeimg.com/160/90/people" onclick="upDate(2)">
<img class="preview" id="pic3" src="https://placeimg.com/160/90/animals" alt="Young Puppy" onclick="upDate(3)">
</figure>
</section>
<script>
var gallery = document.getElementById('gallery');
gallery.addEventListener('mouseover', function(e) {
if (e.target !== e.currentTarget) {
var target = e.target.id;
upDate(target);
}
e.stopPropagation();
}, false);
function upDate(target){
var tgt = document.getElementById(target);
var src = tgt.src;
var alt = tgt.alt;
var fig = document.getElementById('frame');
var cap = document.getElementById('caption');
fig.style.backgroundImage = "url("+src+")";
cap.innerHTML = alt;
}
</script>
</body>
</html>
Upvotes: 0
Reputation: 68433
it should be
function upDate(previewPic)
{
var src = previewPic.getAttribute( "src" );
var alt = previewPic.getAttribute( "alt" );
document.getElementById('image').style.backgroundImage = "url('" + src + "')";
document.getElementById('image').innerHTML = alt;
}
Upvotes: 0