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!
|
This demonstration gives you an overview of IBM® Rational® Build Forge Express Edition, a global offering that provides a framework to automate and execute software processes. Rational Build Forge provides a software assembly line that can support all of your tools, technologies, and platforms so you can achieve a repeatable, reliable, and traceable build and release process.
FREE! Go There Now!
| | | |
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!
| | | |
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!
| | | |
Poor Requirements Management capabilities in an Enterprise have been linked to excessive project failures, escalating IT costs, and failure to deliver competitive advantage into the marketplace. Join Brianna M Smith from IBM Rational and learn about how successful organizations align IT and Business stakeholders through collaborative processes and tools for effective requirements management, and how an integrated approach across the IT lifecycle can provide unparalleled visibility and traceability to ensure that project teams are delivering on the business vision by "doing the right things" and "doing things right."
FREE! Go There Now!
| | | |
Visit IBM developerWorks to download a free trial version of WebSphere Business Modeler Advanced V6.1.1, IBM’s premier business process modeling and analysis tool for business users that offers process modeling, simulation, and analysis capabilities. IBM WebSphere Business Modeler helps you visualize, understand, and document business processes for continuous improvement.
FREE! Go There Now!
| | | |
Visit IBM developerWorks to download IBM DB2 Express-C 9.5, a no-charge version of DB2 Express 9 database server. DB2 Express-C offers the same core data server base features as other DB2 Express editions and provides a solid base to build and deploy applications developed using C/C++, Java, .NET, PHP, and other programming languages.
FREE! Go There Now!
| | | |
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!
| | | |
Visit IBM developerWorks to try the IBM SOA Sandbox for process. The SOA Sandbox for process focuses on providing a trial environment with the necessary tooling and components required to gain a better understanding of business processes and how to best improve existing business processes to derive value quickly.
FREE! Go There Now!
| | | |
The discipline of assembling and delivering software is maturing beyond standard developer-centric compile/test software builds. The end-to-end software development lifecycle is emerging as the new focus moves “Beyond the Build.” Join this on demand webcast to learn about methods for streamlining software delivery and key capabilities of the IBM Rational Build Forge framework for automating build and release management in environments of any size.
FREE! Go There Now!
| | | |
WebSphere Process Server delivers a unique integration framework that simplifies existing IT resources. Often, as IT assets grow to support business demand, so too does their complexity and manageability. In this webcast, we’ll discuss how WebSphere Process Server helps deliver an SOA infrastructure that provides a common model to orchestrate, mediate, connect, map, and execute the underlying IT functions. Discover how WebSphere Process Server simplifies integration of business processes by leveraging existing IT assets as reusable services without the complexities of traditional integration methodologies.
FREE! Go There Now!
| | | |
All FREE IBM® developerWorks Tools!
| |
