962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Interviewed on an Envato blog
+11 more
JeffreyWay says

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

962 posts
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
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/

4388 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team 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
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 6 years
  • Has referred 10+ members
  • Has sold $40,000+ on Envato Market
  • Interviewed on an Envato blog
+11 more
JeffreyWay says

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

4388 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team 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
  • Has been part of the Envato Community for over 5 years
  • Has sold $1,000+ on Envato Market
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
+5 more
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
  • Has been part of the Envato Community for over 6 years
  • Has sold $1+ on Envato Market
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
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

4388 posts ThemeForest Reviewer
  • Has referred 1+ members
  • Has sold $40,000+ on Envato Market
  • Has collected 50+ items on Envato Market
  • Member of the Envato Team
+12 more
Ivor Envato team 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 :)

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by