Threaded Mode | Linear Mode

***drdebcol*** · 05-02-2010, 05:44 AM

This small tut is about how animating your image/background to fade when you place your mouse over it.
First download javascripts.zip that are attached to this post.
Extract that file and and upload those files onto your server where you can locate them.
Open up your .html file and copy/paste the following text in between your <head></head> tag :

Code:

<script type="text/javascript" src="LINKTOYOURSCRIPT/bgmod.js"></script>

<script type="text/javascript" src="LINKTOYOURSCRIPT/jquery.js"></script>

<script>

$.noConflict();

jQuery(document).ready(function(){

jQuery("img.a").hover(

function() {

jQuery(this).animate({"opacity": "0"}, "");

},

function() {

jQuery(this).animate({"opacity": "1"}, "");

});

});

</script>

Now go to your .css file that should already be embedded and linked to in your html file and add this to it then save it :

Code:

div.fadehover {

        position: relative;

}

img.a {

    left: 0;

    top: 0;

    z-index: 10;

    position: absolute;

}

img.b {

    left: 0;

    top: 0;

    position: absolute;

}

Now head back to your .html document and place this text into your main content where ever you want it :

Code:

<div class="fadehover">

     <a href="#"><img src="LINKTOIMAGE" alt=""  class="a"/></a>

     <a href="#"><img src="LINKTOIMAGE" alt="" class="b"/></a>

</div>

Replace this character "#" with link that you want.
So basically, Class "a" is the original image, class "b" is the image you want the animation to fade into. Keep in mind, if your using a transparent image then the Background image or "faded" image will be visible even when your mouse isn't over it.
That would be everything.