Building Link Buttons with the Yahoo Button Control

This series, which is made up of five instructive tutorials, walks you through the remarkable functionality offered by this powerful DHTML control. And it shows you how to use it in concrete situations to build all sorts of buttons, ranging from simple web form elements to professional-looking drop-down menus.

Having already introduced you to the subject of this series of tutorials, let me quickly recapitulate the topics that were covered in the previous article, so you can have a much clearer idea of how that tutorial links with the current one.

All right, as you’ll surely recall, in the preceding article of the series I showed you, with several code samples, how to use the Yahoo! Button Control to build certain types of buttons, called “push” inside the context of the Yahoo UI framework. As you saw during the course of that tutorial, building these kinds of widgets is indeed a straightforward procedure that can be learned even by novice web designers, since these buttons were created by using some existing “<input>” tags and some basic JavaScript code.

Of course, one of the most important things that should be noticed here concerning the creation of “push” buttons is that their functionality is rather limited when used as stand alone web-based controls. However, this limitation can be easily addressed, since the versatility of the Yahoo! Button Control allows you to build some other types of elements, which can be potentially more useful when it comes to building interactive user interfaces.

Therefore, in this fourth installment of the series I’m going to demonstrate how to use the button control to create buttons that can be tied to a specific URL. As you might guess, these buttons are called “links” inside the context of the Yahoo UI framework, and can be built in a simple way by using either some existing “<input>” tags, or directly with JavaScript.

Having explained the topic that will be covered in this tutorial, let’s move forward and see how to build “link” buttons using the handy Yahoo! Button Control. Let’s begin!