javascript onmouseover更改背景圖片

我需要使用JavaScript創建簡單的照片庫。我的代碼不工作javascript onmouseover更改背景圖片

function upDate(previewPic){ 
document.getElementById('image').style.backgroundImage = "url('previewPic.src')"; 
document.getElementById('image').innerHTML = previewPic.alt;

在此功能，我應該改變的URL DIV與id="image" 預覽圖像的源文件的背景圖像

HTML代碼：

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

來源

2015-12-29 Palaniichuk Dmytro

應該

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

來源

2015-12-29 18:25:37 gurvinder372

它的正常工作與形象。但是爲「alt」創建一個變量 - 沒有必要。非常感謝。 –

我做了一個演示，目的是顯示你需要更正的內容，並不斷加入，對不起。您會在下面找到建議的更改。圖像不匹配的原因是因爲圖像的來源是動態的。它會與你的靜態圖像正常工作。

<!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) { 
 
\t if (e.target !== e.currentTarget) { 
 
     var target = e.target.id; 
 
     upDate(target); 
 
    } 
 
    e.stopPropagation(); 
 
}, false); 
 

 
function upDate(target){ 
 
\t var tgt = document.getElementById(target); 
 
\t var src = tgt.src; 
 
\t var alt = tgt.alt; 
 
\t var fig = document.getElementById('frame'); 
 
\t var cap = document.getElementById('caption'); 
 
\t fig.style.backgroundImage = "url("+src+")"; 
 
    cap.innerHTML = alt; 
 
} 
 
</script> 
 
</body> 
 
</html>

來源

2015-12-29 19:34:15 zer00ne

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

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="UTF-8"> 
 
\t <title>Photo Gallery</title> 
 
\t </head> 
 
<body> 
 
\t 
 
\t <div id = "image"> 
 
\t \t Hover over an image below to display here. 
 
\t </div> 
 
\t 
 
\t <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()"> 
 
\t 
 
\t <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()"> 
 
\t 
 
\t <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>

來源

2015-12-31 21:34:18 Wauky

任何想法如何包括onmouseout =「unDo（）」> – Wauky

幾乎在那裏... – Wauky

我做到了！但任何人都可以請我解釋JS編碼！ – Wauky

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

來源

2016-05-12 09:31:00 noobninja

javascript onmouseover更改背景圖片

回答

相關問題