Menu
Hi…I’d like to click on a picture (lightbulb) and that click causes:
-the lightbulb turns on (changes src)
-a picture below the light bulb changes the opacity
I’m so far – yet I don’t know how to make it work backwards…
See and try it yourself here: [url]http://sweb.cz/srandovni-video/
Here is my code: (it works to a point – you turn on the lightbulb and the picture changes opacity…yet it doesn’t work backwards)
<html>
<head>
<!–styles…not important–>
<style type=”text/css”>
div
{
background-color:black;
width:200px;
height:200px;
}
img.room
{
width:200px;
height:200px;
}
</style>
<!–The functions:–>
<script type=”text/javascript”>
cc=0;
function changeimage() <!–this functions changes the source of the bulb–>
{
if (cc==0)
{
cc=1;
document.getElementById(‘myimage’).src=”
}
else
{
cc=0;
document.getElementById(‘myimage’).src=”
}
}
var dd=0
var c=0; <!–c stands for opacity of the picture under the lightbulb–>
var t;
var t2;
function timedOpacity()
{
if (dd==0)
{
dd=1;
fce()
}
else
{
dd=0;
fce2()
}
}
function fce()
{
clearTimeout(t2)
document.getElementById(‘img’).style.cssText = “opacity: ” + (c / 100) + “; filter:alpha(opacity=” + c + “)”;
c=c+1;
var t=setTimeout(“fce()”,5)
}
function fce2()
{
clearTimeout(t)
document.getElementById(‘img’).style.cssText = “opacity: ” + (c / 100) + “; filter:alpha(opacity=” + c + “)”;
c-1;
var t2=setTimeout(“fce2()”,5)
}
</script>
</head>
<body>
<img src=”
<div>
<img class=”room” src=”
</div>
</body>
</html>
Thanks for your response…