Javascript 在背景色函数下添加背景图像_Javascript_Html_Css_Image_Background

Javascript 在背景色函数下添加背景图像

javascript html css image

Javascript 在背景色函数下添加背景图像,javascript,html,css,image,background,Javascript,Html,Css,Image,Background,我的互动宠物有三个功能（改变背景、调暗灯光、鼠标跟随）。我试图在身体的背景中添加一个图像，但每次我尝试时，它都会被推到顶部，脏/干净的水箱功能不起作用。有人能告诉我如何更改下面第一个函数的颜色部分，以在图像之间切换，而不是在颜色代码之间切换吗？我认为这将解决眼前的问题/ CSS代码： //change background color: dirty/clean tank setTimeout(function dirty() { //sets background color to murky

我的互动宠物有三个功能（改变背景、调暗灯光、鼠标跟随）。我试图在身体的背景中添加一个图像，但每次我尝试时，它都会被推到顶部，脏/干净的水箱功能不起作用。有人能告诉我如何更改下面第一个函数的颜色部分，以在图像之间切换，而不是在颜色代码之间切换吗？我认为这将解决眼前的问题/

CSS代码：

//change background color: dirty/clean tank
setTimeout(function dirty() { //sets background color to murky green
document.body.style.backgroundColor = ****"#CCCC99";** //would like this to be an image**
var btn = document.body.appendChild(document.createElement('button'));
btn.appendChild(document.createTextNode("Clean the tank!"));
    document.body.style.marginTop = "-1000px";

btn.onclick = function clean() {
    btn.parentNode.removeChild(btn);
    document.body.style.backgroundColor = **"#CCFFFF";//would like this to be an image**
    setTimeout(dirty,27000); //how long it takes to make the tank dirty
};
},500); //first loading of clear blue timeout


//dim the lights
 var dimmed = 0;
function toggleLights()
{ 
var dimmer = document.getElementById("dimmer");
if(dimmed == 0) dimmed = 1;
else dimmed = 0;

if(dimmed == 1)
{
    dimmer.style.opacity = 0.8;
    dimmer.style.visibility = "visible";
}

if(dimmed == 0)
{
    dimmer.style.opacity = 0.0;
    dimmer.style.visibility = "hidden";
}
}


//fish moves on mouse hover
$(document).ready(function() {  
$("#swim").mousemove(function (event) {
var fish = $("#fish1");
var position = fish.position();
var mousey = event.pageX;


if (position.left > mousey) {
    $("#fish1").html("<img src='images/happy.png' />");
} else {
    $("#fish1").html("<img src='images/happyback.png'/>");
}

$("#fish1").stop().animate({
    left: event.pageX,
    top: event.pageY
}, 300);
});
});

//更改背景颜色：脏/干净的油箱
setTimeout（函数dirty（）{//将背景色设置为暗绿色
document.body.style.backgroundColor=**“#CCCC99”**//希望这是一个图像吗**
var btn=document.body.appendChild（document.createElement（'button'）；
appendChild（document.createTextNode（“清洁油箱！”）；
document.body.style.marginTop=“-1000px”；
btn.onclick=函数clean（）{
btn.parentNode.removeChild（btn）；
document.body.style.backgroundColor=**“#CCFFFF”//希望这是一个图像吗**
setTimeout（dirty，27000）；//使油箱变脏需要多长时间
};
},500); //首次加载清除蓝色超时
//把灯调暗
变暗的var=0；
函数toggleLights（）
{ 
var dimmer=document.getElementById（“dimmer”）；
如果（暗显==0）暗显=1；
否则变暗=0；
如果（暗显==1）
{
dimmer.style.opacity=0.8；
dimmer.style.visibility=“可见”；
}
如果（暗显==0）
{
dimmer.style.opacity=0.0；
dimmer.style.visibility=“隐藏”；
}
}
//鱼在鼠标悬停时移动
$（文档）.ready（函数（）{
$（“#游泳”）.mousemove（函数（事件）{
var fish=$（“#fish1”）；
var position=fish.position（）；
var mousey=event.pageX；
如果（position.left>mousey）{
$（“#fish1”）.html（“”）；
}否则{
$（“#fish1”）.html（“”）；
}
$（“#鱼1”）.stop（）.animate({
左：event.pageX，
顶部：event.pageY
}, 300);
});
});

HTML代码：

<HTML>
<HEAD>
<TITLE>Untitled</TITLE>


<link href="style.css" rel="stylesheet" type="text/css" />  

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"
</script>
<script type="text/javascript" src="pet.js"></script>  
<script type="text/javascript" src="core.js"></script> 

 </HEAD>



<div id="table">
<div id="dimmer" onClick="toggleLights()"></div>
<a href="javascript:toggleLights();"><img src="images/table-lamp.png" height="380px" 
alt="table lamp"></a>
</div>


<div id="swim">
<div id="fish1"><img src="images/happy.png"/></div>
</div> 

</BODY>
</HTML>


无标题
在HTML中添加起始的
标记，并使用javascript而不是样式属性更改元素类。这样，您就可以通过CSS文件对样式进行更多的控制
所以你可以这样做：
document.body.className = 'state1';

在你的CSS中
.state1{
   background-image: url(the/image.jpg);
}

等等