I've been browsing various sources and utilizing different techniques I've come across (primarily on this platform) to guide me in my progress so far. However, I fear that I may have unintentionally backed myself into a corner by choosing an incorrect path early on. Essentially, my goal is to create a light switch effect. Upon loading, the page background is black with an image featuring a black background within a frame (there is some subtle light glare/glow present, which explains the need for the image). When the switch is clicked, it changes the background color to white and replaces the image with another one having a white background. The transition works smoothly, but I would like to incorporate a fade effect to make it more gradual, akin to a light gradually turning on/off. Given the method I employed earlier, I am uncertain if achieving this will prove more challenging than anticipated.
After researching, I discovered that fading backgrounds without containers can be tricky. I am unsure of how to proceed with my current setup. I am open to any suggestions, even if it means reworking certain aspects using alternative methods. I have included some commented out code snippets to showcase previous attempts. As I am relatively new to jQuery, I acknowledge that certain elements may appear flawed.
Fiddle link provided below. The images used are placeholders but effectively demonstrate the concept: http://jsfiddle.net/timtim123/7wh4B/
HTML:
<body id="bodyback">
<img id="out" src="rhino.png" width="527" height="376" border="0" />
<img id="frame" src="frame.png" width="589" height="377" border="0" />
<img id="paper" src="paper.png" width="142" height="214" border="0" usemap="#links" />
<img src="background.png" id="backimg"/>
<img src="background2.png" id="backimg" style='display:none;'/>
<div id="lightswitch">
<img src="switchdark.png" width="46" height="275" border="0" alt="Make it light" />
</div>
CSS:
#bodyback {
background-color:black;}
#backimg
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#backimg2
{
position:absolute;
top: 0px;
left: 0px;
z-index: 2;
}
#lightswitch
{
top: 0px;
left: 900px;
position:absolute;
z-index: 7;
}
JS:
$("#lightswitch").click(function() {
var src = $('#backimg').attr('src');
//change background image and color to white
if(src == 'background.png') {
// $("#backimg").fadeTo('slow', 0.3, function()
// $(this).attr("src","background2.png"),
$("#backimg").attr("src","background2.png"),
$("#bodyback").css("background-color","white");
//change background image and color back
} else if(src == "background2.png") {
$("#backimg").attr("src","background.png");
$("#bodyback").css("background-color","black");
}
});