Creating CSS Buttons (二)

a css button creation class introductionin an earlier article, creating css buttons, i examined how to create graphical-appearing buttons using nothing but html and css. while this approach is fairly simple to implement - just add a few style tags and a suitable href and div tag - it is a bit mundane to have to do for each and every button, especially since you need to have a unique set of style classes and ids for each unique button. (if you are thoroughly confused by this point, be sure you've read the creating css buttons article before delving into this one...) in this article we will examine a small, but handy class to help automate the process of creating css buttons. furthermore, when using a class we'll be creating and placing buttons much like you would in a vb project. (for more information on creating and using classes in vbscript, be sure to read mark lidstone's excellent article: using classes within vbscript!) determining the class propertiesthe first step in creating our css button creating class is to decide what properties makeup a css button. while there is literally no limit to the number of properties one could conceivably attribute to a button, for this article i am going to assume that this set of properties conveys the basic features one would like to have in a button: cssbutton class properties name uniquely identifies each button. backcolor specifies the background color of the button. bordercolor specifies the color of the button's border. font the font to use for the button's label. must be in the format: style size font-name, such as: bold 12pt arial. fontcolor the color of the font when the button is not selected. width the width of the button. text the text to display on the button. url the url to take the user to when the click the button. mouseovercolor the color to make the font when the user's mouse moves over the button.this will only work for visitors using ie... these properties describe each button. realize that you must use a unique name for each independent button you want on a given web page. if you create multiple buttons with the same name, when you mouse over one button, all of those buttons will highlight. creating the class methodsnow that we've looked at the properties for the cssbutton class, let's examine the two methods we'll need: generatestyletag() and generatebuttontag(). since each css button needs its own classes/ids declared in a style tag, and, additionally, needs an href/div section to display the button, these two methods return the applicable style tag and html. these methods are very simple, and can be seen below: public function generatestyletag()'create the style tagdim strstylestrstyle = "<style type=""text/css"">" & vbcrlf & _"<!--" & vbcrlf & _"#mybutton" & name & " {border-style: inset; " & vbcrlf & _" border-color: " & bordercolor & ";" & vbcrlf & _" background-color: " & backcolor & ";" & vbcrlf & _" width: " & width & ";" & vbcrlf & _" text-align: center; }" & vbcrlf & vbcrlf & vbcrlf & _"a.buttontext" & name & " {color: " & fontcolor & "; " & vbcrlf & _"text-decoration: none; " & vbcrlf & _"font: " & font & ";" & vbcrlf & _"cursor: hand; }" & vbcrlf & vbcrlf & vbcrlf & _".buttonover" & name & " {color: " & mouseovercolor & ";" & vbcrlf & _" text-decoration: none; " & vbcrlf & _" font: " & font & ";" & vbcrlf & _" cursor: hand; }" & vbcrlf & _" // -->" & vbcrlf & _"</style>"generatestyletag = strstyleend functionpublic function generatebuttontag()dim strhtmlstrhtml = "<a href=""" & url & """ class=""buttontext" & name & """ " & _"onmouseover=""this.classname='buttonover" & name & "';"" " & _"onmouseout=""this.classname='buttontext" & name & "';"">" & _vbcrlf & "<div id=""mybutton" & name & """>" & vbcrlf & text & _vbcrlf & "</div></a>" & vbcrlfgeneratebuttontag = strhtmlend functioncreating a button - the whole processnow that we have outlined the properties in our class, along with the two needed methods, let's examine how we will actually create some buttons on a web page. the first thing to do is to create an instance of our cssbutton class for each css button that we wish to display on the page. (the complete source for the cssbutton class is available in a download at the end of this article.) a very simple example can be seen below. it creates two buttons, one that links to yahoo! and one that links to lycos. (be sure to try out the live demo!) '... insert declaration of cssbutton class here ...dim btnyahoo, btnlycosset btnyahoo = new cssbuttonset btnlycos = new cssbuttonbtnyahoo.backcolor = "#aaaaaa"btnyahoo.bordercolor = "#bbbbbb"btnyahoo.font = "bold 12pt verdana"btnyahoo.fontcolor = "black"btnyahoo.width = "80px"btnyahoo.mouseovercolor = "yellow"btnyahoo.url = "http://www.yahoo.com/"btnyahoo.name = "yahoo"btnyahoo.text = "yahoo!"'display the yahoo buttonresponse.write btnyahoo.generatestyletag()response.write btnyahoo.generatebuttontag()response.write "<p> </p>"btnlycos.backcolor = "#aaaaaa"btnlycos.bordercolor = "#bbbbbb"btnlycos.font = "10pt arial"btnlycos.fontcolor = "black"btnlycos.width = "70px"btnlycos.mouseovercolor = "yellow"btnlycos.url = "http://www.lycos.com/"btnlycos.name = "lycos"btnlycos.text = "lycos"'display the lycos buttonresponse.write btnlycos.generatestyletag()response.write btnlycos.generatebuttontag()[view a live demo!] pretty straightforward, no? to create a button, we simply create an instance of the cssbutton class, set its properties, then call output the css/html of its generatestyletag() and generatebuttontag() methods. note that you should create all of your buttons and set all of the properties before you emit any html, and then display each button's associated style tags in the head portion of the html document. hopefully with this class you'll find creating css buttons that much easier! enjoy, and happy programming!