Animation in any environment, including cartoons, is accomplished by showing a series of pictures that advance the action. In cartoons and many computer applications, animations can be accomplished by showing the series of pictures one at a time in order. This is accomplished by showing a picture, pausing and then hiding the picture and showing the next. JavaScript adds one more dimension. Since you have to worry about download time, you don't want an animation filling the entire with of the page. Instead you can show a smaller picture and move the location at which the next picture is seen. Consider the animation located in the file week6animate.htm . The action takes place on the opposite sides of the screen and later in the middle. The largest part of this display has no action or background (other than the page background) so if you created an animated gif file this size you would waste a lot of space.
This animation uses the following images.
| |
|
| |
|
| |
|
| |
|
| |
|
| |
|
Open the file week6animate.htm using Red Edit. Comment out the animation setup and add the two lines shown below the comment. Now view the page and press the hide and view buttons. This is a repeat of last weeks exercise .
function start()
{
/* for (var i = 0;i<numberDivs;i++)
{
divs[i] = new makeObject("div"+i,locsx[i],locsy[i]);
if(i==0 || i==numberDivs-1)
divs[i].show();
}
moveAbout(-1,speed);*/
divs[0]= new makeObject("div0",25,25);
divs[0].show();
}
Notice that two new buttons have been added. The first, "Move", moves the frog to an absolute position on the page. The last button, "MoveRel", moves the frog relative to the current location. Pressing the "Move" button always positions the frog at the same place, while pressing the "MoveRel" button moves the frog the same distance everytime, but relative to the current location. These buttons have event handlers that call on "moveTo" and "moveRel" respectively. Two other functions in the object maker set. These are relatively simple functions that change the left and top locations in the style. The variables x and y store the current location, so that a relative move simply adds the change (dx and dy) to the x and y values respectively.
function moveTo(x,y)
{
this.x = x;
this.y = y;
this.css.left = x;
this.css.top = y;
}
function moveRel(dx,dy)
{
this.x +=dx;
this.y += dy;
this.css.top = this.y;
this.css.left = this.x;
}
Timing is important in animation. The viewer must have time to see each frame of the animation before it is hidden. The JavaScript function setTimerout calls a function after waiting a specified interval (setTimerout(fun,interval)). If you create a variable, timer, and write the following:
timer = setTimer("moveTo("+50+","+50+")",300);
You can stop the timer by calling clearTimeout(timer);
Web page designers frequently want to draw attention to a link. They may change the color of the text (or background), or display information about the link either in the status line of the browser or in a specified place on the screen. Internet Explorer provides a special style A.hover that allows the designer to specify colors when the cursor passes over the link, but this is limited and Netscape has never implemented it. An alternative is to surround your link with a DIV and change the style properties of that DIV. One thing you can change is the background color. Click here to see this type of rollover.
As in the animation above, you create a style for each div. In addition create styles for the link and body.
A {
text-decoration: none;
color: #000000;
}
.divcl {
position: absolute;
left: 0;
top: 0;
visibility: visible;
}
BODY {
background: #E1E0B3;
color: #0080FF;
}
Next add the onMouseOver and onMouseOut handers given below. The onMouseOver causes the background of the div to be set to #AAAAFF which is not the body color. The onMouseOut cause the background color of the div to be set to the body background. Notice each function also has a section in which the border is set. This will show in Internet Explore but not in Netscape. While some of the effect is lost in Netscape, it is still possible to tell you have rolled over the link. While you can add things that only work in one of the browsers, you should make sure the effect can be seen in some form in all browsers that support styles.
function overIt(num)
{
divs[num].setBackgroundColor("#AAAAFF");
//This only works in ie
divs[num].css.borderStyle = "solid";
divs[num].css.borderColor="#FF0000";
}
function out(num)
{
divs[num].setBackgroundColor("#E1E0B3");
//works in ie
divs[num].css.borderStyle="none";
}
The file rollovertest.htm contains two more examples of rollover. The first is an attempt to mimic the Internet Explorer hover style when the browser is Netscape and use hover in Internet Explorer. It requires that you duplicate a link in two divs. Simply hide and show the appropriate div in response to mouse position. This is the code for the links
<DIV ID= "l0" CLASS="link"><A HREF = "inclass2.htm" onMouseOver="over() "onMouseOut="off()">The great link</A></DIV> <DIV ID="m0" CLASS="overLink"><A HREF = "inclass2.htm" CLASS = "red" > This links to everything</A></DIV>
Here are the mouse handlers.
// Initialization
var
divoff ,
divon,
numberLinks = 1,
div;
function start()
{
div= new makeObject("div1");
divoff= new makeObject("m0");
divon=new makeObject('l0');
}
// Event Handlers for first rollover
function over()
{
divoff.hide();
divon.show();
}
function off()
{
divoff.show();
divon.hide();
}
You can also make rollovers that work with maps. The example you see by clicking here is created by placing two gif files at the same location on a page and making the appropriate image visible when the mouseOver or mouseOff event occurs. The two images are shown here.
The code that implements this rollover is given here.
<SCRIPT LANGUAGE = "JavaScript"> </SCRIPT> </HEAD> <BODY onLoad="init()"> <DIV ID= "divoff" CLASS= "offit"><IMG SRC = "menu.gif" USEMAP = "#mpMenu"></DIV> <DIV ID= "divon" CLASS= "onit"><IMG SRC = "menuover.gif" USEMAP="#mpMenu"></DIV> <MAP NAME="mpMenu"> <AREA SHAPE="RECT" COORDS="0,0 116,18" HREF="/" onMouseOver="mapOver(true)" onMouseOut="mapOver(false)" ALT="No Link"> <AREA SHAPE="RECT" COORDS="117,0 181,18" HREF="/cgi-bin/suggest.cgi" onMouseOver="mapOver(true)" onMouseOut="mapOver(false)" ALT="Suggestions"> <AREA SHAPE="RECT" COORDS="182,0 222,18" HREF="http://www.coolcentral.com" onMouseOver="mapOver(true)" onMouseOut="mapOver(false)" ALT="Link to Cool Central"> <AREA SHAPE="RECT" COORDS="223,0 263,18" HREF="/new/" onMouseOver="mapOver(true)" onMouseOut="mapOver(false) "ALT="Link to New"> <AREA SHAPE="RECT" COORDS="264,0 339,18" HREF="/headlines/" onMouseOver="mapOver(true)" onMouseOut="mapOver(false)" ALT="Link to Headlines"> <AREA SHAPE="RECT" COORDS="340,0 397,18" HREF="/search.cgi" onMouseOver="mapOver(true)" onMouseOut="mapOver(false)" ALT="Link to Search"> <AREA SHAPE="RECT" COORDS="398,0 468,18" HREF="/index2.html" onMouseOver="mapOver(true)" onMouseOut="mapOver(false)" ALT="Link to Index 2"> </MAP>
The file also contains a second type of rollover. In this case the designer wanted a picture to appear when the cursor was over a given text block. To do this a dummy link (HREF="#") was used so that the mouseover and mouseout actions could be implemented. The link was also given a style that would make it stand out. In this case the div surrounding the link is used only to align it with the picture that will appear during mouseover events. The html for these two items is the following.
<DIV ID= "div0" CLASS= "divcl"> <A HREF= "#" CLASS = "gold" onMouseOver="over1()" onMouseOut="off1()" >This is an anchor</A></DIV> <DIV ID= "div1" CLASS= "div1cl"><IMG SRC = "../Nice3.jpg"> </DIV>
The div containing the picture was made into an object and the handlers follow.
// Event Handers
function over1()
{
div.show();
}
function off1()
{
div.hide();
}
You could have just used the hide and show in the case of Netscape, but this is more complicated and the hover style results in a change in the text when you want to show the picture in Internet Explorer and that may be an unwanted Side effect.
This example shows how you can have a page respond to the change in choice in a combo box. It is based on a page found at http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm that has been modified to work in both Netscape and Internet Explorer.
In this case the Select block has an onChange handler that is called whenever the selectedIndex is changed. This index is 0, 1, 2, or 3 in this case, which corresponds to the Ids of the four "flower" divs. Each of these divs is at exactly the same location, but only one is shown at a time.
<H3>Please select a flower:</H3> <FORM NAME=form1> <SELECT name=menu1 onChange="changeFlower(this.selectedIndex); return false;"> <OPTION >Mona Lisa Tulip <OPTION >Mixed Dutch Tulips <OPTION >Bijou Violet <OPTION >Pink Chrysanthemum </SELECT> </FORM>
The code here is more efficient since it uses the div id to create a style. The change functions again are a variation of those you have seen already in the previous examples.