Need help with image onmouseover.

Hey everyone, I want to make a bit nicer of an effect instead of the basic onmouseover image swap. I have a button, onmouseover I want it to change to button2. Instead of the regular image swap, I want to make a nice fade into the button2, and onmouseout, the button fades back to button1. Any ideas? I want too stick with JS as well. No flash please

Raw JS, or with the help of a library like jQuery?

Raw JS, or with the help of a library like jQuery?

I find a nice jquery effect Jeffrey. Thanks for your help though Here’s the plugin:

http://jqueryfordesigners.com/image-cross-fade-transition/

You can achive this with sprites Alex I don’t know why you still use that Dreamweaver tool

1.- Go to photoshop and design the button, then duplicate the button – > then leave one pixel between them.

2.- Make the difference – > Then Trim the image and save it for the web

3.- Measure it with photoshop (60px height 30px each buttom + 1px that I intentionally put)

Code it this way

I’ll setup an unorder list just for the example.

<ul>
<li><a href="#">My Button 1</a></li>
<li><a href="#">My Button 2</a></li>
</ul>

CSS

A (Anchor) is an inline element you need to set this element as a block that’s why I use

display:block;

Background: Set your image to no-repeat. What are those 0 0 ? well that’s the background position. 0 (left-right) 0 (top-bottom) I’ll use some math in the hovered image.

Finally set the height and the width.

li a 
{
display:block;
background: url(sprite.png) no-repeat 0 0; 
width:135px; 
height:30px; 
text-indent: -9999px 
}

Remove all since width and height are inherited. Now the math (remember our 60px sprite?) 60px minus 30px (a normal) = 31px (a hovered)

li a:hover {
background: url(sprite.png) no-repeat 0 -31px;
}

The results

This is the method I use and it works perfectly, css sprites saves time and bandwidth

@ipad

Thanks! But…. I was looking for a jquery script to fade in and out. Like a crossfade, instead of just the basic rollover technique. Thanks for your tutorial though! I gotta start learning sprites instead of using the stupid dreamweaver tools, I know

Or if you need more info – we posted a tutorial on net.tutsplus.com today on this very subject.

Or if you more info – we posted a tutorial on net.tutsplus.com today on this very subject.

Definitely useful Alex check it out – http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/

Or if you more info – we posted a tutorial on net.tutsplus.com today on this very subject.

Definitely useful Alex check it out – http://net.tutsplus.com/tutorials/html-css-techniques/use-sprites-to-create-an-awesomeness-filled-navigation-menu/

Wow what a coincidence! Thanks guys

iPad thanks for that man. I dont know why but I can understand yours better than any other tut out there.

Now ill go to nettuts and learn how to make them more stylish

iPad thanks for that man. I dont know why but I can understand yours better than any other tut out there. Now ill go to nettuts and learn how to make them more stylish

You’re very welcome my friend