I am facing a small issue. I have successfully implemented a fadeIn and fadeOut effect on an entire page by clicking HTML links. However, I now want to dynamically change the images associated with these links using an array.
Here is the code for transitioning between pages in HTML:
Script
$(window).load(function(){
$("#overlay").fadeOut(1500);
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("#overlay").fadeIn(1000, function() {
window.location = linkLocation;
return false;
});
});
});
Css
#overlay {
position: fixed;
top: 0; left: 0;
background: #fcc916 url(img/logo/blablabla.png) no-repeat center center;
/*background: #ffffff;*/
width: 100%;
height: 100%;
z-index: 314159;
}
html
<div id="overlay"></div>
I understand that I need to create an array of images and retrieve them using getElementById, but I am unsure of how to proceed...
Thank you for your valuable assistance and apologies for any language barriers!