我需要使用JavaScript创建简单的照片库。 我的代码不起作用
function upDate(previewPic){
document.getElementById('image').style.backgroundImage = "url('previewPic.src')";
document.getElementById('image').innerHTML = previewPic.alt;
在这个功能中我应该
使用id="image"
更改div的背景图片的网址
到预览图像的源文件
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()">
答案 0 :(得分:3)
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";
}
&#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;
<!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>
&#13;
答案 1 :(得分:1)
function upDate(previewPic){
document.getElementById('image').style.backgroundImage="url('" + previewPic.src + "')";
document.getElementById('image').innerHTML=previewPic.alt;
}
答案 2 :(得分:0)
应该是
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;
}
答案 3 :(得分:0)
我做了一个演示,旨在展示你需要纠正的内容,我一直在补充,抱歉。您将在下面找到建议的更改。图像与悬停的图像不匹配的原因是因为图像的来源是动态的。它可以与您的静态图像一起正常运行。
<!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>
答案 4 :(得分:0)
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";
}
答案 5 :(得分:0)
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";
}