Adding roll-over button effects to your web template using Dreamweaver

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 Stickysauce web template.

Before we start you need to create 2 button sets from the blank buttons included in your web template, by 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 images folder in your web template. Note: Remember to keep your roll-over button the same size as your original button otherwise you will cause disproportional movement in the buttons when moused over.


Original button 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 template`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 template`s index page and have the objects palette displaying you will now need to delete the pre-placed button sets so that you can replace them with the new roll-over function button set. To do this click your cursor underneath the last button in your web template and drag to the top button (see the below diagram). The dark shadow effect over these buttons mean that the buttons are now highlighted and ready to delete. Press delete on your keyboard to delete these buttons.



Now to add the roll-over buttons. 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. In the second field browse for the button that changes on roll-over. 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 in general, feel free to e-mail me or for assistance regarding your web template don't hesitate to ask for my help on the template topic section of Stickysauce`s webmasters forum.

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! Calling all CC Power Users – and those that would like to be! Join this Rational Talks to You teleconference, featuring Paul Boustany and Mark Krasovich, to speak to the experts about becoming a Rational ClearCase power user. Get a chance to ask your questions and learn tips and tricks for using Rational ClearCase in Agile development FREE! Go There Now!

NEW! Addressing software-as-a-service challenges using Tivoli security and WebSphere solutions Building a software-as-a-service solution requires addressing a few key technical challenges. In this webcast, we'll focus on the role of IBM Tivoli Directory Server and WebSphere Portlet Factory in creating a Software as a Service solution. We will demonstrate how to use Tivoli Directory Server to prevent the user population of one tenant from accessing the virtual portal and portlet components of another tenant. We will also use the dynamic profile capability of WebSphere Portlet Factory to create multiple highly customized applications from one code base. FREE! Go There Now!

NEW! Download DB2 9.5 for Linux, Unix, and Windows Download a free trial version of IBM DB2 9.5 for Linux, UNIX, and Windows. DB2 9 is the result of a five-year development project that transformed traditional (static) database technology into an interactive data server that merges the high performance and ease of use of DB2 with the self-describing benefits of XML. FREE! Go There Now!

NEW! Download IBM Rational Developer for System z Download a free trial version of IBM Rational Developer for System z, software that can help you deliver core development capabilities; the power of Java Platform, Enterprise Edition (Java EE); and rapid application development support to diverse enterprise application development teams. With comprehensive development tools to help create, deploy and maintain traditional enterprise and composite applications, Rational Developer for System z enables developers with different technical backgrounds to easily participate in important technology projects. FREE! Go There Now!

NEW! Download IBM WebSphere Portal V6.1 beta code Download the IBM WebSphere Portal V6.1 beta code and learn more about the rich features and enhancements in IBM WebSphere Portal V6.1. WebSphere Portal provides a composite application or business mashup framework and the advanced tooling needed to build flexible, SOA-based solutions, and scalability to meet the needs of any size organization. FREE! Go There Now!

NEW! Evaluate IBM Rational Software Analyzer V7.0 Download a free trial version of IBM Rational Software Analyzer Developer Edition V7.0 to identify bug defects earlier in the software development cycle. Rational Software Analyzer is an extensible software development solution that reduces the expense of bug-fixes by enabling static analysis code reviews and bug identification very early in the development cycle. FREE! Go There Now!

NEW! Evaluate Rational Host Access Transformation Services (HATS) Toolkit V7.1 Visit IBM developerWorks to download a free trial of the Rational Host Access Transformation Services (HATS) Toolkit. The HATS toolkit provides a set of plug-ins for the IBM Rational Software Delivery Platform to help you easily extend your legacy applications. HATS makes your 3270 and 5250 applications available as HTML through the most popular Web browsers, while converting your host screens to a Web look and feel and it also enables you to develop new Web, portal, and rich-client applications. 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!

NEW! Test terminal-based applications with Rational Functional Tester Regression testing -- in which code is thoroughly tested to ensure that changes have not produced unexpected results -- is an important part of any development process. But many testing environments neglect the terminal-based applications that still form the backbone of many industries. In this tutorial, you'll learn how the Rational Functional Tester Extension for Terminal-Based Applications works with other Rational Functional Tester to help test terminal-based applications quickly and easily. FREE! Go There Now!

NEW! Using Rational Business Developer to enhance your developer productivity Join this Rational Talks to You teleconference, to hear how Enterprise Generation Language (EGL) eliminates the need for tedious and error-prone low level coding, so developers can focus on business requirements. EGL extends the Rational software development platform with a simplified programming language that enables developers who have little or no experience with Java, Web technologies or Service Oriented Architecture, to create enterprise-class applications and services quickly and easily. It also allows developers who may have little or no mainframe programming experience to quickly create traditional mainframe components. FREE! Go There Now!

All FREE IBM® developerWorks Tools!