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

Question

I am trying to use a mouseover event on thumbnail images to show a larger image above. I have three images with the class 'preview', and am writing a function upDate(), that takes parameter previewPic, in an external JS file that I want to change the background-image of a seperate div to the thumbnail preview. 'x' is the div i want to set background image to, 'y' is where i believe i am going wrong. My code is as follows:

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

i think

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

is problem, you can try

x.style.backgroundImage = url(y);

Answer 4

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

Here, you are passing y as a string inside the url(). You need to concatinate the varibale not a string.

Try this it will work.

Here + sign is used for concatinate the variables.

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

Answer 5

You must type in your html document Instead img tag form this text, just like <img src ="yourphoto" id ="img" style ="width:100px;height:100px;">

Next you should trigger this element by javascript or Powerfull javascript library "Jquery". Here is code (Remember your should be include your jquery file first).

next type your javascript inside the HTML document or external javascript file, which your choice

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

It will working fine...... I hope you your problum will be resolved.