如何使用“ this”更改javascript中的图片来源？

Question

我有一个id为“ image”的div元素，最初没有背景图像。 我有另一个图像，当我将鼠标悬停在其上时，将调用somefunction（this）。 现在，我希望此函数将div的背景图像更改为悬停的图像。 我正在做这样的事情...

HTML：

<div id = "image"> a division </div>
<img class = "abc" onmouseover = somefunction(this) src ="someimage.jpg>

CSS：

#image{ background-image : url(''); }

JS：

function somefunction(element)
{
    var x = document.getElementById('image');
    x.style.background.src = element.src;
}

但是它还是无法正常工作，我只想使用“ this”来实现。

Answer 1

尝试此代码

function somefunction(element)
	{
		var x = document.getElementById('image');
		x.style.backgroundImage = "url('"+element.src+"')"
	}

	<div id = "image"> a division </div>
	<img class = "abc" onmouseover="somefunction(this);" src="your path to file.PNG"/>

Answer 2

您在HTML内联样式/属性中缺少一些""；

此外，在JavaScript函数中使用backgroundImage +变量/字符串串联。并在background-image div上添加默认的#image CSS样式。

在javaScript中命名函数/变量时，也请使用camelCase。因此somefunction应该是someFunction。

function someFunction(element)
{
    var x = document.getElementById('image');
    console.log()
    x.style.backgroundImage ='url('+element.src+')';
}

#image {
  height:100px;
  width:200px;
  background-image:none;
  background-size:cover;
  background-repeat:no-repeat;
  margin-bottom:15px;
}

<div id = "image"> a division </div>
<img class = "abc" onmouseover="someFunction(this)" src="https://via.placeholder.com/350x150">

Answer 3

function somefunction(element){
    var x = document.getElementById('image');
   	x.style.backgroundImage = "url('http://s9.tinypic.com/mb4bux_th.jpg')"
    console.log("div's background changed")
}

<div id = "image"> a division </div>
	<img class = "abc" onmouseover = somefunction(this) src="http://s9.tinypic.com/2lv1yrt_th.jpg"/>