-----Original Message-----
From: css-d-boun...@lists.css-discuss.org
[mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Tim Snadden
Sent: Saturday, August 01, 2009 4:55 PM
To: css-d@lists.css-discuss.org
Subject: Re: [css-d] integrating CSS with ASP randomizer
On 2/08/2009, at 6:54 AM, Jenni Beard wrote:
> My question is, I am planning to use a CSS layout. But, I will also
> be
> using ASP code so that the image of the dancer will "randomize"
> about 4-6
> similar images when a new page is loaded. I know that ASP is OT for
> this
> list, but I'm really not sure how to integrate the two together so
> that the
> dancer images can be a background image for every page. If I were
> wanting
> to just randomize a content image (such as the sample image of the
> studio
> shown in the draft), I know how to do that in ASP within the html
> file, but
> I'm at a loss as to how to incorporate it into a background with
> CSS. Or,
> is this something that can be done strictly in CSS without having to
> use the
> ASP randomizer code??
Use asp to output a randomised id and then set the background image
for the different ids in your css.
If you have 6 images, create 6 ids and one class. The class can be
used for setting the styles that apply to all of the images.
Your html might look like this...
<div class="dancer" id="dancer1"><!-- the id is randomised, sometimes
it will be dancer2, dancer3 etc. -->.</div>
Your css might look like this...
.dancer {
/* all of the styles for the element apart from bg-image */
}
#dancer1 { background-image: url(/path/to/image/dancer1.jpg); }
#dancer2 { background-image: url(/path/to/image/dancer2.jpg); }
etc.
______________________________________________________________________
Thank you Tim. I am working on implementing this and have a question about
your answer. I've tried to figure out how to create a randomizer for the div
id itself and haven't figured that out yet, nor have I figured out how to
incorporate that code once I have it.
I tried another approach; I have created a randomizer for pulling photos out
of a folder--this is something I've done before. I've got a basic page
created that is doing this with little else on the page, and it works just
fine (I'm just using sample images at this point, and not adding any other
attributes to the asp code). The problem arises when I start to mix the asp
and css codes; I receive a 500 error for some attempts and other attempts
there is just nothing there where the random images should show up, and I
cannot figure out how to mix them and have it work.
On this page, I have the randomizer code set to two places. One works fine
(you can see the images come up), and the other has nothing showing up at
all (this is supposed to be at the top of the page; you can see the div set
up in firebug).
I've placed the css on the same page just to simplify things as much as
possible until I can figure this out; here is my entire page code; thanks
for any suggestions you can offer!:
----------------------------------------------------------------------
<%...@language="VBSCRIPT" CODEPAGE="65001"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";>
<html xmlns="http://www.w3.org/1999/xhtml";>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>this is a test.</title>
<style type="text/css">
<!--
.style1 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-size: medium;
}
.dancer {
font-family: Geneva, Arial, Helvetica, sans-serif;
background-image: url(<%Response.Write RandomImage("dancers/", "gif
jpeg png", "My Image")%>);
background-repeat: no-repeat;
}
-->
</style>
</head>
<body>
<%
Function RandomImage(ImagesFolderPath, ImageFileTypes, ImageDescription)
'Declare variables
Dim CompleteImagesFolderPath
Dim FileSystemObject
Dim ImageFolder
Dim Files
Dim i
Dim ImageFiles
Dim File
Dim FileName
Dim FileExtension
Dim RandomNumber
'Find the complete path to image folder by using Server.MapPath
CompleteImagesFolderPath = Server.MapPath(ImagesFolderPath)
'Create an instance of the FileSystemObject which allows ASP to
'access the file system
Set FileSystemObject = Server.CreateObject("Scripting.FileSystemObject")
'Check that the folder containing the images exists
If Not FileSystemObject.FolderExists(CompleteImagesFolderPath) Then
RandomImage = "Error 0: Cannot find requested folder"
Set FileSystemObject = nothing
Exit Function
End If
'Get the folder containing the images
Set ImageFolder = FileSystemObject.GetFolder(CompleteImagesFolderPath)
'Get a list of all the files within the images folder
Set Files = ImageFolder.Files
'Use a dictionary object to temporarily store the image file names
i = 1
Set ImageFiles = Server.CreateObject("Scripting.Dictionary")
'Loop through the list of files within the images folder.
'If the file has a file extension that is in the list of
'file types specified in the ImageFileTypes function parameter,
'then add the file name to the ImageFiles dictionary object
For Each File in Files
FileName = File.Name
FileExtension = Right(FileName, Len(FileName) - (InStrRev(FileName, ".")))
If InStr(1,ImageFileTypes,FileExtension,vbTextCompare) > 0 then
ImageFiles.Add i, FileName
i = i + 1
End If
Next
'Destroy objects that are no longer required
Set ImageFolder = nothing
Set Files = nothing
Set FileSystemObject = nothing
'Initialise the random number generator
Randomize
' Check that image file(s) have been found
If ImageFiles.Count = 0 Then
RandomImage = "Error 1: Requested folder does not contain any image files"
Exit Function
End If
'Generate a random number between 1 and the number of image files
RandomNumber = Int((ImageFiles.Count) * Rnd + 1)
'Return a hyperlink to a random image file
RandomImage = "<img src=" & Chr(34) & ImagesFolderPath &
ImageFiles.Item(RandomNumber) & Chr(34) & " alt=" & Chr(34) &
ImageDescription & Chr(34) & ">"
Set ImageFiles = nothing
End Function
%>
<div class="dancer"> </div>
<p><%Response.Write RandomImage("dancers/", "gif jpeg png", "My Image")%>
</p>
<p class="style1">this is a test.</p>
</body>
</html>
______________________________________________________________________
Duh, sorry, I left out the URL of the test page:
http://spiritmoves.com/new-site/
Thanks!
Jenni
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
