鼠标悬停的图像预览 JavaScript答案

【问题标题】：Image preview JavaScript with mouseover鼠标悬停的图像预览 JavaScript
【发布时间】：2016-05-13 12:14:01
【问题描述】：

我正在尝试在缩略图图像上使用鼠标悬停事件以在上方显示更大的图像。我有三个带有“预览”类的图像，并且正在编写一个函数 upDate()，它接受参数 previewPic，在一个外部 JS 文件中，我想将单独的 div 的背景图像更改为缩略图预览。 'x' 是我想要设置背景图像的 div，'y' 是我认为我出错的地方。我的代码如下：

function upDate(previewPic){

   x = document.getElementById('image');
   y = previewPic.getAttribute('src');
   x.style.backgroundImage = url('y');
}

【问题讨论】：

标签： javascript

【解决方案1】：

您需要更改分配变量/字符串的方式

x.style.backgroundImage = 'url(' + y + ')';

【讨论】：

这行得通。你介意解释一下这个解决方案吗？我理解外部引号，但很难理解 + y +
这就是你如何在 js 中将字符串与变量连接起来。每当您想将变量值与硬编码文本一起输出时，这就是它的完成方式。比如：'string' + 变量 + 'string' @MickeyR

【解决方案2】：

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 = "MouseOver Image 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%;
}

	<div id = "image">
		MouseOver Image to Display Here.
	</div>
	<img class = "preview"
    src = "img/image1.png"
    alt = "Image 1"
    onmouseover = "upDate(this)"
    onmouseout = "unDo()"
    >
	<img class = "preview"
    src = "img/image2.png"
    alt = "Image 2"
    onmouseover = "upDate(this)"
    onmouseout = "unDo()"
    >
	<img class = "preview"
    src = "img/image3.png"
    alt = "Image 3"
    onmouseover = "upDate(this)"
    onmouseout = "unDo()"
    >

【讨论】：

【解决方案3】：

我觉得

x.style.backgroundImage = url('y');

有问题，你可以试试

x.style.backgroundImage = url(y);

【讨论】：

【解决方案4】：

x.style.backgroundImage = url('y');

在这里，您将 y 作为字符串传递给 url()。您需要连接变量而不是字符串。

试试这个吧。

这里+符号用于连接变量。

x.style.backgroundImage = 'url(' + y + ')';

【讨论】：

【解决方案5】：

您必须在您的 html 文档中输入而不是 img 标记形成此文本，就像 <img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

接下来，您应该通过 javascript 或强大的 javascript 库“Jquery”来触发此元素。这是代码（请记住，您应该首先包含您的 jquery 文件）。

接下来在 HTML 文档或外部 javascript 文件中输入您的 javascript，由您选择

$(document).on('mouseover','#img',function(){
$('body').css({'background-image':'url("showimageurl")'});
return true;
});

它会正常工作...... 希望您的问题能得到解决。

【讨论】：