Javascripting Your Header Image
I started working on a website today, its all about keyless entry locks. I started with an idea of having a lock on the page, and then got a little excited. I wanted to make the lock open up, so that the viewer understands that this page is about locks, and not sides of a door or wood. I decided to use Jquery which is like JavaScript’s Dom on steroids.The entire rollover was made with just one image found here
The code I used looks something like this:
$(document).ready(function(){var Header = {
addFade : function(selector){
$(”").css(”display”, “none”).prependTo($(selector));
$(selector+” a”).bind(”mouseenter”,function(){
$(selector+” .fake-hover”).fadeIn(5000);
});
$(selector+” a”).bind(”mouseleave”,function(){
$(selector+” .fake-hover”).fadeOut(14000);
});}
};$(function(){
Header.addFade(”#header_roll”);
});});
The first snip of code makes sure that the document has finished loading before we start the JavaScript process.
$(document).ready(function(){
The second part creates the local variable “Header” and loads it with a fading function.
And finally the last part puts this fading variable into the CSS style #header_roll.
Now to implement the JavaScript into the CSS. This code simply moves the image up replacing the old image with the new. However they are both the same image, just one on top of the other.
#header_roll {
margin: 0;
padding: 0;
text-indent: -9999px;
width: 869px;
height: 300px;
position: relative;
margin-left: 0em;
background: url(/images/header.jpg) no-repeat;
}
#header_roll .fake-hover {
margin: 0;
padding: 0;
width: 869px;
height: 300px;
display: block;
position: absolute;
top: 0;
left: 0;
background: url(/images/header.jpg) no-repeat 0 -300px;
}
#header_roll a {
position: absolute;
top: 0;
left: 0;
width: 869px;
height: 300px;
display: block;
border: 0;
background: transparent;
overflow: hidden;
}
