962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says

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 :)

2529 posts
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Blog Editor
  • Bought between 50 and 99 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
+6 more
JeffreyWay says

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

962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says
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/

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says

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

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.

HTML Just a valid html code
<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 :P

962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says

@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 :D

2529 posts
  • Attended a Community Meetup
  • Author had a Free File of the Month
  • Blog Editor
  • Bought between 50 and 99 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Has been a member for 5-6 years
+6 more
JeffreyWay says

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

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says
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/

962 posts
  • Beta Tester
  • Bought between 10 and 49 items
  • Contributed a Tutorial to a Tuts+ Site
  • Exclusive Author
  • Grew a moustache for the Envato Movember competition
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 000 and 5 000 dollars
  • United States
webdesigndeluxe says
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 :)

116 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Sold between 1 and 100 dollars
  • United States
finsta2 says

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

4317 posts ThemeForest Reviewer
  • Envato Staff
  • Reviewer
  • Community Moderator
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • Venezuela
  • Has been a member for 5-6 years
  • Envato Studio (Microlancer) Beta Tester
  • Sold between 10 000 and 50 000 dollars
  • Exclusive Author
+9 more
Ivor Reviewer says
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 :)

by
by
by
by
by
by