Fade an image into another image (help needed)

[dbz]

I have a menu and when the mouse hovers over one of the options, I would like it to fade into the "mouse over" version. (I actually used an image sprite, which is all of the buttons put into one image.)

 

I got this idea from a tutorial. I copied the tutorial to make the image sprite, but I made my own css and javascript because I don't want to use jquery.

 

Exactly what I am trying to do:

Make the toolbar image fade into what it should look like

 

So. I need help with a fading function. I can't include all of the files, so here is a link to where it is up and currently being worked on: http://danielbz.99k.org/pagedraft1.php

 

Thank you for reading and for all of the help you may provide!

 

P.s. I know the images are a little messed up on the bottom and I will fix that later. I'm also bad at photoshop, but I just wanted to make good enough images to get the project going.

[optikalefx]

my first question would be, why not use jquery.

 

My answer would then, be you need to make a function that does what jquery fade does.  Basically a setInterval timer that changes the opacity over time.  The key here is that you need the parent element relative position. and the two images absolute, with z-indexes set.

 

<div style='position:relative'>

<img style='position:absolute;top:0px;left:0px'>

<img style='position:absolute;top:0px;left:0px'>

</div>

 

this way the images are on top of eachother.  Now fade one out and the other will show.

 

[dbz]

The main reason I don't want to use jquery is that I'm just learning javascript. I feel like it is probably better to learn the language before I start using a library to help me out; furthermore, I don't know the syntax nor the functions of jquery, so it would be even harder to do.

 

If you think I should use jquery though, I would be willing to do so if I could be walked through it so I understood it.

 

 

More importantly, Thank you for your help optikalefx!

[optikalefx]

no prob dude.

 

I totally agree with learning without jquery first.

 

So Ill give you the parts and you can put them together.

 

I already gave you the html and css in the last post.  The idea here again, is to fit 2 images on top of eachother.

 

The next part is creating an interval

 

myInterval = setInterval('dofade()',20);  // dont use var myInterval

 

then in function dofade() {

    // get a reference to the image on top using document.getElementById("idofimg");

  // change its object.style.opacity -= .1;

  // add some if statment to make sure it  stops at 0

  // when it gets to 0, use clearInterval(myInterval);

}

 

So when you call that interval it will fade out the first image, and since the first image is already on top of the 2nd one, the 2nd one will look like its fading in.

 

Of course you can make a 2nd interval, or even add more into the function, that fades the bottom in as the top one goes out.  Just keep in mind the more work you make the browser do the slower and choppier it is.

 

Good luck man!  Post back if you have any questions.  If you can't get it, hit me up on youtube and ill make a video of me fixing it.  youtube.com/optikalefxx