javascript onmouseover 改变背景图片答案

【问题标题】：javascript onmouseover change background imagejavascript onmouseover 改变背景图片
【发布时间】：2015-12-29 18:17:09
【问题描述】：

我需要使用 JavaScript 创建简单的照片库。我的代码不起作用

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

在这个函数中我应该使用 id="image" 更改 div 的背景图像的 URL 到预览图的源文件

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

【问题讨论】：

标签： javascript onmouseover onmouseout

【解决方案1】：

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>

【讨论】：

知道如何包含 onmouseout="unDo()">
我成功了！但是谁能帮我解释一下JS编码！

【解决方案2】：

function upDate(previewPic){

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

}

【讨论】：

【解决方案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;
}

【讨论】：

它与图像正常工作。但是为“alt”创建一个变量 - 没有必要。非常感谢。

【解决方案4】：

我做了一个演示，目的是展示您需要更正的内容，我一直在添加，抱歉。您将在下面找到建议的更改。图像与悬停的内容不匹配的原因是图像的来源是动态的。它可以与您的静态图像一起正常工作。

<!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>

【讨论】：

【解决方案5】：

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

【讨论】：

【解决方案6】：

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

【讨论】：