It all starts out so easy

The first thing you need to do is create a page just like you would any other. Create all your rollovers and images in Dreamweaver, making sure that you always point to the same color scheme folder each time. Link all your CSS files, and make sure that everything displays correctly.

It's extremely important to use the same color scheme folder for each image that you want to be affected by the style changer. Remember that each color scheme is in its own folder, so just set the page up to work for one scheme, then later we'll set up the ASP to dynamically change the folder name containing the scheme (we'll use a Find and Replace in case you were curious). We'll cover that more at the very end.

Time to play with Snippets

Now we're going to insert all our testing code to make sure our page works like it's supposed to. The first thing you should do on this page is include your changer include file, by using the "Style Changer Include" snippet. Insert this at the very top of your document. Your asp file should now look like this:

<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="changer.inc" -->
<html>
<head>
<title>My Page Title</title>
.....

This brings all our working code into the page. The next thing we need to do is insert our "Check Style Values Block", "Styles List" and "Style Navigation" Snippets. This will tell us the name of all our styles so we can make sure they're correct, and will give us a way to test whether our changer is really working.

After you insert these, your page should look like this:

<%@LANGUAGE="VBSCRIPT"%>
<!--#include file="changer.inc" -->
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<h1>Style Values</h1>
 <p>
 <b>Cookie Value:</b> <%
 If Request.Cookies("StyleID") <> "" Then
 	Response.Write Request.Cookies("StyleID")
 Else
 	Response.Write "No current cookie."
 End If
 %><br>
 <b>Current style used:</b> <%=MyStyle%><br>
 <b>Current Folder:</b> <%=MyStyleFolder%>
 </p> 
 <h1>Styles List</h1>
 <p>Total Styles: <%=UBound(StyleArray) + 1%></p>
 <table border=2>
	 <tr> 
		 <td>Row</td>
		 <td>Style Name</td>
		 <td>Folder Name</td>
	 </tr><%
 Dim i
 For i = 0 to UBound(StyleArray, 2)
	 Response.Write("<tr><td>#" & i & "</td>")
	 Response.Write("<td><a href=""" & Request.ServerVariables("SCRIPT_NAME")  &_
	  "?style=" & i & """>" & StyleArray(0,i)  & "</a></td>")
	 Response.Write("<td>" & StyleArray(1,i) & "</td></tr>")
 Next
 %></table>
 <%= StyleNav %>
...... all your page content.....

The end result of all this code should look like our example. Click the style names in either the list, or the navigation, and you should see the style values block change accordingly. I'd also recommend inserting an image from your styles on the page, and replacing the style name folder with the <%=MyStyleFolder%> line. This will tell you whether or not your page is pulling up the right images. You can see that in our example also.

Now we get to Search and Replace.