The CSS Resources Intro Page

We made it a point to use many different techniques on our intro page, so that we would have good examples of CSS style usage, DHTML/DOM usage, JavaScript usage, animation, image arrays, conditionals, counters, timers, preloads, fade-ins, animated gifs used in slide-show images, and animated image links. The file name is css-resources.html.

The page is a way to introduce the potentials of CSS, DHTML, and JavaScript to up and coming programmers, whether amateurs who don’t know much yet but want to learn, or more experienced programmers who are strong in many areas but weak in the areas alluded to in the last paragraph.

The theme here is somewhat reminiscent of Tales from the Crypt, that scary TV show with the impressive introduction where a haunted house is entered and the camera goes down a staircase into a cellar and up to a coffin and then the crypt-keeper pops up with a horrid laugh and makes lousy jokes about horror-related subjects—mostly related to the episode he's introducing. But we have a strong distaste for sticking sound onto websites, since we feel it’s intrusive, distasteful, oppressive, offensive and unnecessary. Why lay ear spam on a visitor? A better idea is to have a button on your site that can be pushed to create whatever sound-effects, speech or music you decide to offer. But it’s critical that this is a choice! We, you, and most people click away from any site that starts making with the ear torture. It’s too much like those TV ads that get in your face, as well as just being a nasty trick. A site is supposed to be where you offer visitors neat possibilities, not where you lay an unwelcome trip on someone.

The first 20 frames are the visitor entering a haunted house and going up to a door and looking through a keyhole. The next 23 frames are about the file cabinet the visitor sees through the keyhole; it opens, a file pops up (you didn’t really want to see that ugly old crypt-keeper again, now did you?) and the visitor gets closer and closer until the file folder title is visible. It changes colors until it ends up blue. Then three colorful banners appear at the top of the screen and they begin animating—bands of color scroll sideways in all the words. And a short text-based feature list appears against the black background, but as you peruse the web page the background box around the text slowly fades in, going from black to white. This brings the eye from haunted house animation to the three animated banner links to the information (feature list) in the text box.

Strategically, if the visitor wants to stay in the CSS-Resources site and learn CSS, DHTML, and JavaScript, then here's his/her chance to do so: s/he’ll just click on the blue CSS-Resources box on the "computer screen" or the CSS-Resources link in the banner link. If the visitor would rather have a site that provides web page menus, buttons, etc. for a fee, then the Website Menu Heaven banner can be clicked. If, however, the visitor has decided that all this programming and e-commerce stuff is desired but s/he’s too intimidated by what seems like a huge amount of things to learn about and do, s/he may click the WebHatchers banner and find people eager to do the work at the lowest rates around.

But enough about website design, let’s get to the juicy stuff—the web page code. The counter will be going from 0 to 52 after the cyclem() slideshow function begins due to an onLoad event handler in the <body> tag. The first set of 43 images will take us to where the animation in the "computer screen" is done and it’s time to bring in the banners at the top. Even though there's three banners, they're all one image. But there are 9 frames in the sequence of banner animation. ImageForge was the tool for making all the graphics, except the initial house and lightning stuff (animated gif) which were freebies off the Net. ImageForge will do animated gifs too, but the freebies were just what we were looking for so why redo them when they were already perfect for our needs? The frame timer’s initial setting was 4555 (4.555 seconds), to give the lightning and house animation time to run. We got this timing value via experimentation.

The timer is set to 333 or a third of a second for the 43 initial frames except for the 16^th one which gets 4.555 seconds again to give the second lightning sequence time to do its thing. The size our div calls for is 220 x 172 for the 43 frames even though the haunted_house6.gif sequence was created to be a bit smaller and the lightning.gif sequence was created bigger. We even reduced the latter down to 63 x 93 and altered its left and top properties so it would fit in the window we drew for it. The index value is 10 here to place this gif on top of the frame with the window (z-index = 5 for this), which in turn is on top of the computer image (z-index = 0). Here's the main animation div. Note that it’s a link to the index.html page where CSS-Resources visitors end up if they're searching for info. Then note that it has no image src to start out with. Finally, check out the name attribute for the image tag: pics.

Below you'll find the function that does everything. Think of the combination of JavaScript, CSS, and HTML as a lady named Donna Hanna Tina Mary Louise. Or DHTML for short. Think of CSS as the clothes you dress her in—it’s her style. HTML can be thought of as her naked body without clothes (the HTML inventors are probably thinking: that’s the nicest thing anyone has ever said about HTML). If you dressed her like a royal princess, she’d look one way. If you dressed her like Apple Annie, pushing a grocery cart full of junk and duded up in dirty castoffs, she’d look another way. CSS is the difference. And then comes JavaScript. This is what she does: how she acts and interacts. If she acts and interacts as just HTML without CSS clothes, what you have is a porn site. If she's given interesting duds to wear, your site may be neat, classy or both, but it’s definitely not porn, which requires unstyled HTML. If she interacts with you in a neat, interesting, classy way as well as looking that way, you have a good website, a neat lady metaphorically, and effective DHTML.

We said to note that the main image div has a sourceless img tag with the name pics. The third line below will replace the empty source with image[0] since the counter starts out at 0. Line 8 increments the counter so the animation frames will find their source to be higher numbered image[] array images until the counter hits 15, the 16^th image in the array. There's a respectful pause as the animated gif sequences within itself. (The lightme image object that is lightning.gif starts up on the highest page layer, 10, at counter = 15 and replaces the invisible object gif, t.gif, in the div img with the src name of lit.)

The second to last line in the function keeps setting the timer back to 1/3 second. Once the counter hits 43, line 5’s else kicks in and the first div in the code whose img name is black begins its cycling. This is the 3-banners image div at the top of the screen which measures 759 x 96 initially, but this div and its img both declare a width of 100%, so monitors over 800 pixels wide will likely get 1024 or 1280 pixels wide divs, and therefore the banners will widen. Note that every time the counter hits 52, it’s reset to 43 and this goes on forever or until Bush grows a brain, whichever comes first. But not only does the counter get reset, the text box and heading text box to the right of the "computer" suddenly appear. But here's a surprise: they'd been there all along. It’s just that their text was black on a black background so it was invisible. The sudden appearance uses the W3C DOM method getElementById() to slap new text colors in place of the color style property values initially present. Then the variable i gets changed from 0 to 1. This relates to the if(i>0 && i<256) conditional later on in the function.

As it happens, i is the fade-in flag and color opacity controller all rolled into one. Note that until the if(counter == 52) conditional is true, i doesn’t change from 0 and the fade-in "sub-function" remains dormant, since the i variable’s value is not >0 and <256. But once i is more than 0, the fad-in commences with color values of the text box backgrounds stepping from 0 to 256 with a step value of 4 (hence: i++; i++; i++; i++;). Again the getElementById() method is used for the style change. Can you see why the rgb decimal format is used? When you want to go from black to white, simply use the various shades of gray in between. If you look at the rgb values of grays, they're three equal numbers: e.g., #555555, #888888, and #dddddd, or rgb(85,85,85), rgb(136,136,136), and rgb(221,221,221). That’s what the fade-in does: increment i up 4 from its value of 1 so it’s 5, then move it to 9, 13, etc. So all three color values climb from lighter to darker gray until a number not <256 is reached (which is essentially white, even if a couple of numbers less than the perfect white value of 255). Notice the timer value of 1 millisecond. This isn't actually the time it takes, since the processor is very busy loading in the cached, preloaded banner images out of memory, as well as running this JavaScript function.

function cyclem() {

if(counter < 43) {

document.pics.src = images[counter];

}

else {

document.black.src = blackme[counter - 43].src;

}

counter++;

if(counter == 52) {

counter = 43;

newcolor="blue";

newestcolor="purple";

document.getElementById("box").style.color=newcolor;

document.getElementById("bigbox").style.color=newestcolor;

i++;

}

if(counter == 15) {

millisecond_timer = 4555;

document.lit.src = lightme;

}

if(i>0 && i<256) {

millisecond_timer = 1;

i++; i++; i++; i++;

document.getElementById("bigbox").style.backgroundColor="rgb("+i+","+i+","+i+")";

}

nada=setTimeout("cyclem()",millisecond_timer);

millisecond_timer = 333;

}

Since we've mentioned preloading before, let’s tackle that subject now. Here's the giving of an image object name, without preloading, to the lightning gif. One merely has to tell JavaScript that the image object name is a new image to preload it, but that wouldn’t help here at all, so we didn’t do it.

lightme = "lightning.gif";

And here's the start of the images[] array. Calling this a new array does not preload, as this is in no way equivalent to declaring each of these images a new Image() so that it would preload into the cache.

images = new Array();

images[0] = "haunted_house6.gif";

images[1] = "h0.gif"; . . . . . etc.

If you're preloading, it looks like this:

blackme = new Array();

blackme[0] = new Image(); blackme[0].src = "threelinks.jpg";

blackme[1] = new Image(); blackme[1].src = "t1.jpg";

blackme[2] = new Image(); blackme[2].src = "t2.jpg";

blackme[3] = new Image(); blackme[3].src = "t3.jpg";

blackme[4] = new Image(); blackme[4].src = "t4.jpg";

blackme[5] = new Image(); blackme[5].src = "t5.jpg";

blackme[6] = new Image(); blackme[6].src = "t6.jpg";

blackme[7] = new Image(); blackme[7].src = "t7.jpg";

blackme[8] = new Image(); blackme[8].src = "t8.jpg";

Each image in the array got specifically declared a new image and the src file of each image object is stipulated. The reasons this array got preloaded is to give the visitor’s hard drive a break since this sequence will cycle forever, to avoid the constant changing of file names in the status bar as the files keep loading forever, and to make sure the visitor doesn’t think something is amiss when his/her drive light keeps flickering. The fourth reason we could have preloaded wasn’t relevant in this case but it’s the main reason for preloads in the case of rollovers: to avoid a delay the first time a given file loads. If visitors aren't actually interacting with the screen via clicks or mouse-over hovering, this in not usually significant. The reasons we absolutely wouldn’t want to preload the 43-image images[] array is that it would take too much time, use up too much RAM, be a waste of code, and cause most users to click off to a site designed by a wiser web designer that realized that if you make that much preloading happen before the page is loaded and ready, it will take so much time all visitors would be gone.

The CSS styles for the page were simple, since we put most styles inline so you could more easily see what styles go with what div:

a img {border-color:transparent; border:none;}

.intro {font-family:arial,helvetica,sans-serif;

font-size:1em;

width:20%;

height:249px;

position: absolute;

top:110px;

left:611px;

margin:0;

padding:0;}

The first style tells our image links to forget about borders; we tried them and they looked like crap. The next style tells our outside (unnested) parent div its style rules. The two nested child text box divs inside this div take some of their cues from the parent div and need few extra styles beyond the ones that happen inside the cyclem() function, which changes text and background colors. Note (below) that both child divs have inline styles about text and background colors as well(these two child divs are siblings of each other). If the parent-child relationship seems confusing, just think up-node and down-node. The document is parent to its child, the body; the body is parent to its child, the unnested div; the unnested div is parent to its children, the two nested divs; the nested div is parent to its child, the paragraph of text—etc. Lower in the hierarchy are the children; higher in the hierarchy are the parents.

Even though we said that the child divs take their cues from the parents, above, it’s a bit more complicated than that. Font-family and text color values get inherited (passed from parent to child), but border and background-color values don’t. You have to look at the W3C specs or a really good CSS book or chart to learn about inheritance in CSS styles, or do like most of us, assume the worst and put styles wherever you need styles (with the possible exception of the font-family and text color styles already mentioned, which you'll probably remember. But if you want inheritance where there is none and you're too lazy to redo the style rules, simply use the style property value "inherit" and the problem is solved. An example would be the border property on a nested child div. Use this rule: div {border: inherit;}. Whatever style rules the parent div has about borders will be passed on to this child div.

Anyway, here are the div mommies and babies we've been referring to:

<div id="box" style="color:#000; background-color:#000"><h2 align=center>CSS<br>Resources</h3></div>

<div id="bigbox" style="color:#000; background-color:#000"><p><br><ul><li>CSS and JavaScript tutorials</li><li>lots of examples</li><li>specializing in images, animation, and positioning</li><li>designed for easy location of the info you need</li><br></p></div>

</div>

The links on the page are image links; even when an image is changing its source, its link can be active. Here are the three banner image links:

Each div contains not only a link but an invisible gif ("t.gif") image as well so the link area is the full width of the div, since the 100% you see in the img tag means "100% of the width of my parent div." Note that the three divs themselves are, respectively, 31%, 33%, and 36% of the page width, which corresponds to the actual width of the graphics rectangles of each banner. Also note that the second div box is at left 31% and the third div box is at left 64%. This refers to the percent of the available screen width that must be crossed to get to the left edge of the invisible gif box and link and div, since these all start at the same place.

Free Personal Status Boards (PSB™)

The CSS Resources Intro Page