在背景颜色功能下添加背景图像

Question

I have the three functions running on my interactive pet (change background, dimmer lights, mouse follow). 我在交互式宠物上运行着三个功能（更改背景，调光器，跟随鼠标）。 I'm trying to add an image to the background of the body, but every time I try it gets pushed to the top and the dirty/clean tank function doesn't work. 我正在尝试将图像添加到身体的背景，但是每次尝试将其推到顶部时，脏/清洁水箱功能将不起作用。 Could someone tell me how to change the color sections of the first function below to switch between images instead of color codes? 有人可以告诉我如何更改下面第一个功能的颜色部分，以在图像之间切换而不是颜色代码吗？ I think that would solve the immediate problem. 我认为这将解决眼前的问题。 :/ ：/

CSS Code: 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);
});
});

HTML Code: 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>

Answer 1

Add a starting <body> tag in your HTML, and change element classes with javascript, instead of style properties. 在HTML中添加一个开始的<body>标记，并使用javascript（而不是样式属性）更改元素类。 That way you have more control over the styling through your CSS file. 这样，您就可以通过CSS文件更好地控制样式。

So you would do something like: 因此，您将执行以下操作：

document.body.className = 'state1';

And in your CSS 在你的CSS中

.state1{
   background-image: url(the/image.jpg);
}

and so on... 等等...

在背景颜色功能下添加背景图像

问题描述

1 个解决方案

解决方案1
0 已采纳 2013-02-04 04:57:03

在背景颜色功能下添加背景图像

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-02-04 04:57:03

解决方案1
0 已采纳 2013-02-04 04:57:03