The University Outreach and Extensions asked University Communications to create a lively homepage for their office. They asked for an eye-catching animation to load the page and an appealing design with rollovers. The animation was a fairly standard type of JavaScript that uses setTimeout to animate the movement of a set of letters, words or graphic files. The main page created by my wife as a jpeg file that has a gradated screen which is white at the lower-left corner and orange at the upper-right corner. To create a diagonal gradated screen using a repeated background seemed too difficult (if not impossible) especially with the critical placement of the various components in the design. So rather than trying to take the components and use HTML to place the items, I decided to just center the jpeg file on a page with a plain background. We submitted the design you can see by clicking here.
The animation is an early version of the things you have seen during the last week. It was created before I had completed the functions in objectmaker, and is based on a number of animation scripts that are available on-line. Each component that will move around the screen is placed in its own div, with the same style class and a different id. When the page initializes, objects are created to access each of these components, and other components on the page. The style used for most of the components is:
.clDivs {
position: absolute;
left: 0;
top: 0;
width: 30;
height: 30;
visibility: hidden;
font-weight: bold;
font-size: 35pt;
font-family: verdana;
color: #0072A8;
background: #EFBD5A;
text-decoration: italic;
}
Examples of two of the divs (one with a word the other with an animated gif file) are:
<div id="div2" class="clDivs"><I>For</I></div> <div id="div3" class="clDivs"> <IMG SRC = "YourAni.gif"></div>
These divs are associated with objects in the initialization functions in the following loop.
oZdivs=new Array();
for(i=0;i < numberOfLetters;i++){
oZdivs[i]=new makeObj('div'+i)
oZdivs[i].moveIt(-400,0)
oZdivs[i].css.visibility='visible'
}
At the end of the initialization process, one of three random animations or a fixed test animation is called using eval. The test animation is used to place the divs so the final output is pleasing.
if (animation==4) animation=Math.round(Math.random()*2)+1
if(!testing)
eval('anim'+animation+'(0)')
else
testIt()
Each of the animation functions is similar, they just use different paths that the divs follow on their way to the final position. These paths are two arrays, one for the x-position and one for the y-position of points along the path which the div will follow. Each of the animation functions calls on animX, which is a recursive function that displays each div in different places for a predetermined length of time, aspeed.
xPath1=new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,
-52,1,53,98,131,151,156,147,124,92,59,0)
yPath1=new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,
255,260,254,239,213,179,143,108,77,51,30,0)
function anim1(num,test){
if(num<oZdivs.length-1){
st=test?test:0;
animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')')
}else
endanim(0);
}
The animX functions moves the divs based on an offset from the x and y center of the page. The arrays (X and Y) are the path arrays that are passed as strings. They are copied into local arrays. These local arrays are used to place the div. The divNum is the number of the current object, and num current subscript along the path. After moving the div, it calls on setTimeout to move to the next position along the path. After completing the number of moves stored in the path arrays, eval(fn) evaluates the function string 'anim1('+(num+1)+','+st+')' which animates the next div.
function animX(divnum,arrayX,arrayY,speed,num,fn){
arrayXr = new Array(); arrayYr = new Array()
arrayXr = eval(arrayX); arrayYr = eval(arrayY)
arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
if(num<arrayXr.length){
oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),
arrayYr[num]+(pageYcenter+ypos[divnum]))
num++;
setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+",
"+num+",'"+fn+"')",speed)
}else eval(fn)
}
The endanim function erases each of the divs in turn. When all have been erased (num<oZdivs.length-1 is no longer true), the main page (oZdivs[numberOfLetters]) is made visible.
function endanim(num){
if(num<oZdivs.length-1){
oZdivs[num].css.visibility='hidden' //Hiding divs
num++
setTimeout("endanim("+num+")",300)
}else{
oZdivs[numberOfLetters].css.visibility = 'visible';
}
}
The speed is set at the beginning of the script, so you can adjust how fast the animation takes place by increasing and decreasing the variable aspeed.
This page is intended to be a demonstration, so only a few phony links have been included to show how the artist (my wife) envisioned the rollovers. Once again both the rollovers and the main page were put in divs which have their own style.
.rollover {
color: #FFFF00;
background: #0080C0;
font-family: Verdana;
font-weight: bold;
font-size: 14pt;
position: absolute;
width: 300;
z-index: 1;
left: 0;
top: 0;
visibility: hidden;
text-decoration: none;
}
.main{
position:absolute;
z-index: 0;
top:0;
left:0;
background: #EFBD5A;
visibility:hidden;
}
Both the rollovers and the main page start out hidden through the animation. The object corresponding to the main page is stored in oZdivs[numberOfLetters], while the rollovers are stored in their own array, rolldivs. In this problem, you do not want the rectangle around the main picture that indicates it's a map. To hide this rectangle, all of the link related colors found in the body tag are set to the same color as the background. The width of the rollover class is specified as 300. This ensures that in Internet Explorer the rollover will cover the background text. In Netscape this doesn't do anything, so I added the   character (non-breaking space) to pad out the text enough to cover the background text. The side-effect of the padding was that in Internet explorer, the second line of text is almost centered.
<DIV ID= "div5" CLASS= "main"><IMG SRC = "Outrch.jpg" USEMAP = "#MainMap"> <MAP NAME = "MainMap> <AREA SHAPE = "RECT" COORDS = "337, 43, 592, 73" HREF = "#" Alt = "Link to Outreach and Extensions" onMouseOver="mouseIn(0)" onMouseOut="mouseOut(0)"> <AREA SHAPE = "RECT" COORDS = "337, 78, 592, 108" HREF = "#" Alt = "Link to Continuing Professional Education" onMouseOver="mouseIn(1)"onMouseOut="mouseOut(1)"> <area shape="default" nohref ALT="Default"> </MAP> </DIV> <DIV ID= "roll0" CLASS= "rollover"><A HREF = "#" onMouseOver="mouseIn(0)" onMouseOut="mouseOut(0)">Outreach and Extensions    </A></DIV> <DIV ID= "roll1" CLASS= "rollover"><A HREF = "#" onMouseOver="mouseIn(1)" onMouseOut="mouseOut(1)">Continuing Professional           Education            </A></DIV>
The initialization of the objects associated wtih each of these divs is much the same as the other initializations. The mouseIn and mouseOut functions are given below. Notice that the same functions are called with the same purpose from both the AREA tag and the corresponding DIV tag. This eliminates the "blinking" that would occur if you just applied the functions in one of these areas.
function mouseIn(num)
{
rolldivs[num].css.visibility = 'visible';
}
function mouseOut(num)
{
rolldivs[num].css.visibility = 'hidden';
}
This page is self-contained, so you can view the source (or save it) and you can see the entire page.