Creating Rollovers in Dreamweaver CS3

Rollovers let your users know that they are interacting with the web page. In this tutorial, we will use Photoshop to create images to be used in both states of the rollovers and Dreamweaver to create the rollovers themselves.

This video requires Adobe Flash Player.

Visitor Comments »

 

I would like to request making flash an option to make it bigger,

Thanks

 

Comment by Ken | September 16, 2008 @ 6:13 pm

 

It is in flash-right click and you can zoom in. The video quality could be clearer-for most of the videos though-

 

Comment by quillz | September 16, 2008 @ 6:45 pm

 

Thanks, this is very helpful.

 

Comment by Liz | September 16, 2008 @ 6:45 pm

 

Very clear, easy to follow and directive. Where can I find more of her tutorials?

 

Comment by Sonia Borg | September 17, 2008 @ 12:21 am

 

This is such an old technique! It goes along with the Dreamweaver itself as a basic tutorial. This technique isn’t just old it’s not efficient. For rollovers use Image Sprites:
http://alistapart.com/articles/sprites

 

Comment by Alex | September 17, 2008 @ 2:19 am

 

thanks, that’s just what I was looking for

 

Comment by ginny | September 17, 2008 @ 2:51 pm

 

just what I was looking for thanks

 

Comment by Ginny | September 17, 2008 @ 3:04 pm

 

Thanks. Your tutorial helped me create some rollover buttons for my website!

 

Comment by Lou | September 17, 2008 @ 5:25 pm

 

Reply to Alex: why did you watch that tutorial in the first place if you knew all about that? It obviously helped a lot of people who, by the way, probably did not care if you knew it all or not.

 

Comment by Syl | September 18, 2008 @ 3:28 pm

 

Reply to Lou: I’m not a magician to predict what will be in a tutorial. That’s why I watched it first hand. I’m happy that this tutorial helped a lot of people. However, my point is that web-development had gone a long way since this technique was implemented first. I won’t be surprised if the date of this tutorial would be 2005 or 2006. But in 2008 javascript-base menu rollovers are a little bit old-fashioned. With all respect to Laura and Layers Magazine, i think this very helpful resourse should provide with MODERN techniques.

 

Comment by Alex | September 19, 2008 @ 9:39 am

 

Alex, your link is to a technique that may be modern but is very esoteric and convoluted. This tutorial is simple and easy to remember. You’re being too clever by half.

 

Comment by Max | September 19, 2008 @ 3:08 pm

 

This tutorial was easy to follow and every step was clearly described. I loved the tone and style of the lesson.

 

Comment by Jen | September 20, 2008 @ 9:17 pm

 

Would love to watch this put my flash player stops after 2 seconds. Still no fix?

 

Comment by Jhonny | September 23, 2008 @ 12:09 am

 

This was very helpful and clearly laid out.

 

Comment by comment by fred | September 24, 2008 @ 7:37 pm

 

Thank you for your Tutorial. It was very informative, but I was wondering what is a “Ba-in”?

 

Comment by tron1973 | November 3, 2008 @ 4:43 pm

 

[...] Adobe Dreamweaver Tutorial | Creating Rollovers | Rollover States … [...]

 

Pingback by FriDizeo Soup - 10 Great Adobe Dreamweaver Tutorials | WebDizeo | December 23, 2008 @ 11:44 am

 

thank your share! it’s very clear!

 

Comment by Johnny.fan | February 3, 2009 @ 10:35 pm

 

These tutorials are excellent, if you pay attention and just not expect them to tell you everything, you can tie in together the missing parts and be well on your way… This is great, and a nice way to promote your magazine!

 

Comment by carlos vergel | February 22, 2009 @ 7:56 pm

 

Very helpful !!! Thanks!

 

Comment by dcsean | July 5, 2009 @ 11:23 pm

 

Thank you for the tutorial. I was able to implemented in my website. That guy Alex I don’t know what’s his problem, but his method is very complicated. This might be an old method, but very helpful and easy to follow.

 

Comment by Fernando Gomez | August 3, 2009 @ 11:44 pm

Leave us a comment

Comments RSS | TrackBack URI

Back to Top

 
 
Advertisement
Creative Suite Tutorials
  1. Photoshop Photoshop
  2. Illustrator Illustrator
  3. Indesign Indesign
  4. Dreamweaver Dreamweaver
  5. Fireworks Fireworks
  6. Premiere Premiere
  7. Flash Flash
  8. After Effects After Effects
  9. Lightroom Lightroom
  10. Acrobat Acrobat

Get the latest tips, tricks and news delivered straight to your inbox.

From our Partners
Subscribe to Layers Magazine
 
 
 
  • Back to the Layers Magazine Homepage
  • Creative Suite Tutorials
  • Layers Magazine
  • Reviews on top products
  • Layers Magazine Reader Forums
  • Subscribe to Layers Magazine