border image
Home Order Privacy Bookmark Members
logo border image



Services
Portfolio
Products
Sample Code
Quotes
Blog
Feedback
Basket
Checkout
Tools
.net Assemblies


Your basket has: Total items: 0
Subtotal: $0.00



border image
 
corner image
corner image

Article
 Creating dynamic buttons
To build buttons with a dynamic effect is very easy. Here's an example that produces a control panel of buttons with special visual effects. This example uses ASP to have the page call itself and produce an output in the same window without the use of frames.

Begin with your standard opening headers for an ASP page

<%@ LANGUAGE="VBSCRIPT" %>
<%
    Response.Buffer=true
    Response.AddHeader "cache-control", "private"
    Response.AddHeader "pragma", "no-cache"
    Response.ExpiresAbsolute = #January 1, 1990 00:00:01#
    Response.Expires=Now()-1
    Response.AddHeader "Cache-Control", "must-revalidate"
    Response.AddHeader "Cache-Control", "no-cache"

'------------------------------------------------------------------
'This page calls itself so get file name
'------------------------------------------------------------------

strScriptName = Request.ServerVariables("SCRIPT_NAME")

'------------------------------------------------------------------
'Set up your normal html page
'------------------------------------------------------------------

%>

<HTML>
<HEAD>
<TITLE>Control Panel</TITLE>
<META name="description" content="">
<META name="keywords" content="">

Style parameters will be included as an internal format
Alternatively, this could be an external file.

Three style classes are required:
1. for the mouse over event
2. for the mouse out event
3. for the mouse click event

Each class specifies the appearance. The shadow filter can only
be appliead to a tag which can define an area. In this example a
table data cell satisfies that criteria.

<style type="text/css"><!--

.cpover
{
    filter:Shadow(Color="#808080", direction=135);
    color:"#FFFFFF";
    font-weight:bold;
    font-family : "Times New Roman";
    cursor:hand}

.cpout
{
    font-weight: bold;
    font-family : "Times New Roman";
    color : Black}

.cpclick
{
    font-weight: bold;
    font-family : "Times New Roman";
    color:blue}

TD
{
    font-weight: bold;
    font-family : "Times New Roman";
    color : Black;
    text-align : center;}

--></style>

To produce the dynamic effect, the following client-side scripts
are used for each of the mouse events.

<Script Language="VBScript"><!--

Sub document_OnMouseOver()
    ThisTag = Window.Event.SrcElement.tagname
        If ThisTag = "TD" then
            subscript = Window.Event.SrcElement.sourceindex
            document.all(subscript).classname = "cpover"
        end if
end sub

Sub document_OnMouseOut()
    ThisTag = Window.Event.SrcElement.tagname
        If ThisTag = "TD" then
            subscript = Window.Event.SrcElement.sourceindex
            document.all(subscript).classname = "cpout"
        end if
end sub

Sub document_OnClick()
    ThisTag = Window.Event.SrcElement.tagname
        If ThisTag = "TD" then
            subscript = Window.Event.SrcElement.sourceindex
            document.all(subscript).classname = "cpclick"
        end if
end sub

--></Script>

The remainder of the page creates a table for the content and
connecting links.

</HEAD>
<body bgcolor="white" TEXT="#000000" LINK="#000000" VLINK="#000000" ALINK="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0" MARGINHEIGHT="0" MARGINWIDTH="0">

<Table border="4" bgcolor="#A8AF85" width="150"><TD>
    <TR><TD bgcolor="#800000" STYLE= "color:#FFFFFF; font-weight:bold; " Align="center">Control Panel</TD></Font></TR>
    <TR ><TD >

<TABLE border=1 cellpadding=2 cellspacing=2 bgcolor="#C0C0C0" width="100%">


    <A HREF= "<%=strScriptName%>?pid=1"><TR>
    <TD>  Page 1 </TD></TR></A>

    <A HREF= "<%=strScriptName%>?pid=2"><TR>
    <TD> Page 2 </TD></TR></A>


    <A HREF= "<%=strScriptName%>?pid=3"><TR>
    <TD> Page 3 </TD></TR></A>


    <A HREF= "<%=strScriptName%>?pid=4"><TR>
    <TD> Page 4 </TD></TR></A>


    <A HREF= "<%=strScriptName%>?pid=5"><TR>
    <TD >  Page 5 </TD></TR></A>

    <A HREF= "<%=strScriptName%>?pid=Customer Feedback"><TR>
    <TD>  Feedback </TD></TR></A>

</TABLE>

    </TD></TR>
</TD></Table>

A simple in-line style is used here to place the output on the page

<div style="position: absolute; top: 40; left: 170;">
<% If request("pid") <> "" then Response.write (" <BR> This is Page " & request("pid"))%>
</div>

</body>
</HTML>

Enjoy !
Rate this article
Low High
Return To Top
corner image
corner image