Question

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

function upDate(previewPic){

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

Answer 1

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

的方式

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

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

Answer 3

我想

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

有问题，你可以尝试

x.style.backgroundImage = url(y);

Answer 4

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

在这里，您将y作为字符串传递到url（）中。你需要将varibale连接起来而不是字符串。

尝试一下它会起作用。

此处+符号用于连接变量。

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

Answer 5

你必须输入你的html文档而不是img标签形成这个文本，就像<img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

接下来，您应该通过javascript或Powerfull javascript库＆＃34; Jquery＆＃34;来触发此元素。这是代码（记住你应该先包含你的jquery文件）。

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

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

它会工作得很好...... 我希望你的问题得到解决。

使用鼠标悬停的图片预览JavaScript

5 个答案: