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!
|
You'll get answers to many questions and more from David Barnes, Lead Evangelist for IBM Emerging Internet Technologies. David will discuss aspects of Web 2.0 that bring value to corporations, academia, and government. He'll also discuss IBM's vision around Web 2.0, including the importance of remixability and consumability. The discussion will culminate with examples of various IBM Software Group solutions you can use to get ahead of the Web 2.0 adoption curve.
FREE! Go There Now!
| | | |
David Barnes, Lead Evangelist for IBM Emerging Internet Technologies will discuss aspects of Web 2.0 that bring value to corporations, academia, and government. He'll also discuss IBM's vision around Web 2.0, including the importance of remixability and consumability. The discussion will culminate with examples of various IBM Software Group solutions you can use to get ahead of the Web 2.0 adoption curve.
FREE! Go There Now!
| | | |
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!
| | | |
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!
| | | |
Learn how Rational Build Forge can extend a simple compile and package build process by adding customization and deployment capability. Go from a manual method to automating: checking for code changes; getting the latest source; compiling and packaging; customizing; copying to and restarting a deployment server; and sending e-mail notification that a new version is available.
FREE! Go There Now!
| | | |
Ken Krugler, co-founder of code search company Krugle, and Laura Merling, vice president of Marketing and Business Development for Krugle, join to talk about the ins and outs of code search and what it means as a new feature for developerWorks users.
FREE! Go There Now!
| | | |
Rational Build Forge Express Edition is an automation framework that packages the latest enterprise-grade technologies into a reliable, flexible and robust configuration designed and priced specifically for small to midsize businesses. The new Rational Build Forge Express eKit provides you with valuable resources – including a case study, podcast, demo, and articles – to help you increase staff productivity, compress development cycles and deliver better software, fast.
FREE! Go There Now!
| | | |
This whitepaper provides areas to consider when evaluating any software configuration management solution. It addresses how the IBM solutions (Rational ClearCase and Rational ClearQuest) meet the needs and requirements of both project leaders and developers to provide successful Software Change and Configuration Management.
FREE! Go There Now!
| | | |
Try the latest version of IBM Rational Manual Tester V7.0.1 by downloading a free trial from IBM developerWorks. This manual test authoring and execution tool promotes test step reuse to reduce the impact of software change on testers and business analysts and addresses the needs of teams performing at least a portion of their testing manually.
FREE! Go There Now!
| | | |
Join the IBM Watchfire team for an informative discussion on techniques and best practices to proactively manage Web application security and how to effectively build application security testing into the software development lifecycle (SDLC). In this Software Delivery Platform webcast you will learn: How to better understand potential web application security vulnerabilities, best practices and how to effectively integrate application security testing into the software development lifecycle, the importance of detecting and removing software vulnerabilities during application development.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
| |
