Click Here!
|
|
|||
|
|
|
Click Here! |
|
|
|
From the Web:Michael Yu's Civic Car Viewer
Michael Yu's Civic Car viewing program provides you with a good example of how to combine frames with JavaScript. It's located at http://www-leland.stanford.edu/~guanyuan/public/car/car.html The premise behind the program is simple: In one frame, a view of a Honda Civic is displayed. In the other frame, the user has four directional controls to rotate the view in steps in any direction: up, down, left, or right. In achieving this, Yu has made use of a simple file-naming scheme, the windows.location property, and the frames array. The program in Listing W3.1 produces results similar to those in Figures W3.1 and W3.2. Figure W3.1 : Michael's Civic Car Viewer provides interactivity between frames.
Figure W3.2 : The user selects a rotation control on the right, and the image on the left updates.
Listing W3.1. Source code for Michael's Civic Car Viewer page. Parent frameset:
Although the Civic Car Viewer may seem simple at first glance, it provides a good example of how to build easy-to-use programs using multiple frames. It is interesting to note that the program does not follow Netscape's recommendation of placing function definitions in the header of the HTML file. This means it is possible that a user could press one of the four buttons before a function has been evaluated. All the image files are named carA_B.html where A and B are integers. A represents the up-down axis and can have values from 1 to 3, and B represents the left-right axis and can have values from 0 to 7. The script uses three global variables: var ud=0; ud and lr are used to keep track of the current viewing angle of the car. The variable chars is used to build the URL for a new view, as you will see later. The primary function is getcar(). This function accepts two arguments, myud and mylr, which represent changes to the values of ud and lr: ud=ud+myud; Once the changes to the values are made, a series of if statements check whether the new value is outside the acceptable range for each variable; if it is, the command block of the if statement wraps the value around to the other end of the range. For instance, if lr is 8, it becomes 0: if (lr == 8) { lr=0;}; Once this has been done, the function is ready to open the new view in the left frame using parent.frames[1].location=
The command uses parent to
look at the parent frameset and the frames
array to explicitly choose the desired frame. It then sets the
location property to the
new URL.
The actual filename is built with the portion of the URL expression which reads: car"+chars.substring(ud,ud+1)+"_"+chars.substring(lr,lr+1)+".html" The substring() method is used to select single digits from the chars variable based on the values of ud and lr, respectively. Each of the four buttons in the form calls one of four functions: up(), down(), left(), or right(). These functions all work in the same way. They call getcar() with appropriate arguments based on the direction, and then they return a value 0. The value returned by the function is incidental because the value is never used anywhere in the script. Michael Yu's Civic Car Viewer is a concrete example of how combining frames and JavaScript makes it possible to create interactive applications. By taking advantage of frames to build sophisticated interfaces and combining that with JavaScript's ability to generate dynamic URLs, it is possible to extend the simple Web metaphor into something more diverse and powerful.
|
|
|
|
Use of this site is subject certain Terms & Conditions. Copyright (c) 1996-1999 EarthWeb, Inc.. All rights reserved. Reproduction in whole or in part in any form or medium without express written permission of EarthWeb is prohibited. Please read our privacy policy for details. |
