How to create fading links in Dreamweaver

ilz

I recently created this website for Professional Makeup artist Dani Wagener of Boston, Mass. When I was designing this site I decided to try out a technique I stumbled across: making fading link colors on rollovers. What I mean by this is that when you roll over the main navigation the links fade from gray to blue; instead of just switching right to the color like a CSS rollover would do. Check out the final result, and then I’ll explain how to do this effect in Dreamweaver. DaniWagener.com

The first step is to download and install the dreamweaver extension from the guys over at KaosWeaver. Click here to get the extension. Download that, install it, and we are ready to go.

Inside Dreamweaver, highlight a link and go to your Behaviors panel. If you installed the extension properly, you will now have a Kaos option in your menu, like this:

Select that and it will pop open a box that lets you choose a start and end color for you fading links. I chose medium speed for Dani’s site.

Now you are done, it was that easy! There is one other thing I recommend however.. This effect requires Javascipt to work, so you should go ahead and create regular CSS rollovers for the links. So for example, I made the links be blue on the rollover, so if you turn the Javascript off on your browser, you see we still have a rollover effect.

ilz out

Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • BlinkList
  • MisterWong
  • Reddit
  • Add to favorites
  • StumbleUpon
  • Technorati
  • Twitter

Leave a Reply

Spam Protection by WP-SpamFree

Get Adobe Flash playerPlugin by wpburn.com wordpress themes