OpaqueLinksWithCSSClass

Styling Opaque Links With CSSClass
[|CSSClass] allows you to style links as buttons. The opacity of the displayed link can then be adjusted by setting opacity.

Two properties are required for setting opacity. The first is the property. The values may range from 0 (completely invisible) to 1 (completely opaque). The other property is the property. The value should reflect the  value, giving the percent minus the percent sign(%). The code for setting the at 75% would be

code format="vbnet" Opacity: 0.75; Filter: Alpha(Opacity=75); code

This demo shows three links. Each begins at 50% opacity. The link will 'brighten' to full opacity when the mouse hovers above. Read [|CSSClass] for more detailed definition of [|CSSClass]. Also, read [|Styling With CSSID] for a more indepth discussion of [|CSSID].

code format="vbnet" ' Create the CSSID cssID #MainContainer, "{       Background-Color: RGB(128 192 64);        Width: 400px;        Height: 300px;        Padding-Top: 50px;        }"

cssID #LinkContainer, "{       Margin-Left: 100px;        Width: 60px;        Height: 200px;        }"

' Create the CSSClass cssClass "a.frog", "{       Text-Decoration: None;        Font-Family: Verdana;        Font-Size: 10pt;        Font-Weight: Bold;        Text-Align: Center;        Width: 58px;        Height: 48px;        Display: Block;        Background-Color: RGB(192 192 255);        Background-Image: Url('http://runbasic.wikispaces.com/space/showimage/FrogGIF.gif');        Background-Repeat: No-Repeat;        Opacity: 0.5;        Filter: Alpha(Opacity=50);        Padding-top: 10px;        Margin-Top: 10px;        Margin-Bottom: 10px;        Border-Width: Thick;        Border-Style: Outset;        Border-Color: #C0C0C0;    }"

CSSClass "a.frog:Hover", "{       Opacity: 1.00;        Filter: Alpha(Opacity=100);    }"

Div MainContainer Div LinkContainer ' Create 3 links Link #Option1, " Option #1 ", Options Link #Option2, " Option #2 ", Options Link #Option3, " Quit App ", Options ' Set the "frog" class to the 3 links #Option1 CSSClass("frog") #Option2 CSSClass("frog") #Option3 CSSClass("frog") End Div End Div Wait Sub Options key$ Print "You clicked ";key$ Select Case key$ Case "#Option1" Print "Do the first thing.": Print Case "#Option2" Print "Do the second thing.": Print Case "#Option3" Cls Print "The program has ended." ' Program ends here End End Select End Sub code