Tutorial: Roll-over button effects
Software: Macromedia Dreamweaver 4.0 and Dreamweaver 3.0
Difficulty: beginner

This web tutorial will show you how to add cool looking roll-over button effects to your web page.

Before we start you need to create 2 button sets for your web page using your favourite graphics editor. The first button set will be for the original buttons and the second button set will be for the ones that you want to change when rolled-over. Once you have created your button sets save them to your web page`s images folder. Note: Remember to keep your roll-over buttons the same size as your original buttons otherwise you will cause disproportional movement in the buttons when moused over.


Original button set: set.........Roll-over button set:

Now that you have created your button sets we are ready to start. Fire up Dreamweaver and go file + open. Open up your web page`s index page.

Now you need to go Window + objects. The objects palette will look like the below diagram. Note: If the objects palette is already displayed then ignore this procedure.



Now that you have opened your webpage`s index page and have the objects palette displaying you will now need to roll-over button sets.To do this click the area where you would like to add the roll-over button to and then go to your objects palette and click the insert roll-over icon >>

A box will appear (see the below diagram). In the first field that says browse, Browse for the the original button from your first button set that you created. In the second field browse for the button that changes on roll-over from your second button set. Once you have selected your button paths click OK.



Now you will have the first roll-over button in place. F12 on your keyboard to check that everything is OK and to see what your button looks like on roll-over.

Below is the roll-over function that I created for this tutorial using the same procedures.



To add more buttons simply follow the same procedure over and over again until you have the desired number of buttons on your page.

I hope this tutorial was of help.

Cheers,
Chris @ Stickysauce.com The webmasters resource. If you have any questions regarding this tutorial or Stickysauce, feel free to e-mail me.

Note: Webmasters you are free to use this full tutorial for your website providing that the links and tutorial remain as is and that you e-mail us for the image files.

 

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

More Web Development Articles
More By Developer Shed

developerWorks - FREE Tools!

NEW! Applying lean thinking to the governance of software development Effective governance for lean development isn’t about command and control. Instead, the focus is on enabling the right behaviors and practices through collaborative and supportive techniques. Hear from Scott Ambler on how it is far more effective to motivate people to do the right thing than it is to force them to do so. Learn how to form a lightweight, collaboration-based framework that reflects the realities of modern IT organizations. FREE! Go There Now!

NEW! Develop Systems Software Assets with IBM Rational Asset Manager Join us for this on demand webcast to learn about developing complex systems more quickly and efficiently. We'll cover market drivers for developing, governing and reusing systems software assets and how you can develop system software assets with Rational Asset Manager. FREE! Go There Now!

NEW! Evaluate IBM Rational Developer for System i V7.1 Download a free trial version of IBM Rational Developer for System i V7.1, which provides a complete development environment for traditional i5/OS application development. IBM Rational Developer for System i is a new eclipse-based workstation offering for i5/OS application development that provides a comprehensive Integrated Development Environment for edit/compile/debug of traditional RPG/COBOL/C/C++ i5/OS applications. FREE! Go There Now!

NEW! Evaluate WebSphere Extended Deployment Compute Grid V6.1 Visit IBM developerWorks to download a free trial version of WebSphere Extended Deployment Compute Grid, which lets you schedule, execute, and monitor batch jobs. Because online transaction processing and batch jobs execute simultaneously on the same server resources, you can avoid costly duplication of resources. Compute Grid supports job types of Java transactional batch, compute-intensive and a new type called "native execution", which enables non-Java workloads to run on distributed end points. FREE! Go There Now!

NEW! Hacking 101 Join us for this web seminar to learn how you can defend your web applications from attack. Learn about the 3 most common web application attacks, including how they occur and what can be done to prevent them. We’ll also discuss manual versus automated approaches for scanning and identifying web application vulnerabilities and how IBM Rational AppScan, an automated vulnerability scanner, can help you automate more of what you are doing manually today. FREE! Go There Now!

NEW! Harnessing the power of SQL and Java for high performance data access Join this webcast to see how IBM Data Studio Developer and pureQuery can take the pain out of Java data access. uApplications developed using both Java and SQL have become a common requirement. Database connectivity using Java Database Connectivity (JDBC) to create an application is a multi-step tedious process, and tooling that covers both SQL and Java has been unavailable, until now. IBM Data Studio introduces the pureQuery platform: a high-performance, Java data access platform focused on simplifying the tasks of developing, managing, and optimizing database applications and services. FREE! Go There Now!

NEW! Improve your build process with IBM Rational Build Forge, Part 1: Create a continuous build and integration environment Learn how to implement a build management system that uses and extends your existing automation technologies. This tutorial shows, step-by-step, how to install and configure IBM Rational Build Forge to manage builds for Jakarta Tomcat from source code. FREE! Go There Now!

NEW! Rational Talks to You:Per Kroll on Rational Method Composer Plug-in customization Join this Rational Talks to You teleconference on December 11 at 1:00 pm ET to get tips on building your own plugins with Rational Method Composer. Get your questions answered! FREE! Go There Now!

NEW! Rational Talks to You: Grady Booch on Architecture Join this Rational Talks to You teleconference on November 29 at 1:00 pm ET to participate in an interactive discusssion with Grady Booch around architecture and reuse. Get your questions answered! FREE! Go There Now!

NEW! Run your first CICS application on a PC using TXSeries for Windows Learn the basics of the IBM Customer Information Control System (CICS). With a hands-on exercise, learn how to get your first CICS application up and running on your desktop using TXSeries V6.1 for Windows. The tutorial shows you how to download and install a free trial version of TXSeries V6.1. FREE! Go There Now!

All FREE IBM® developerWorks Tools!