z-axis arrow key tied to div change

[jundo12]

hi, i have a script that zooms an image incrementally on up-arrow key press. so, let's say i have a window divided into 5 frames. is there a way to switch/not switch the images in the 5 frames by up arrow key press? could it be done using divs that are either hidden/shown depending on if the script calls for the image to be shown/not shown in any given up arrow key press? i guess this would require (among other things) the ability to track the mouse position along the z-axis.

[jundo12]

this guy's idea is similar but it also needs to act somewhat like a zoom, as i mentioned i have a zoom script that moves (zooms) into the 2d scene on up-arrow key press. as the images switch i want to simulate movement in 3d space by mixing zoom and image changes. for example... i have 5 images in 5 separate frames. these images might make up a scene outdoors, in a room, in a cave or in space. i don't want to use so many image changes in the frames, that it overwhelms the browser, so some zooming of current images in the frames is possibly a way to reduce the amount of image changes needed while moving along the z-axis. it also needs to stop when the up-arrow is released and start again when the up-arrow is pressed again.
https://www.cloudtec.ch/blog/web/201...mouse-position
the other issue is, he's just dealing with x and y mouse positions. the only thing he uses z for is stacking his images for display which is going on invisibly. there's no indication that he's employing the z-axis for the final visual (like ya can't rotate his head on the z-axis).

[jundo12]

p.s. i'm trying to do this without using web gl

[jundo12]

here's a script i used for an old html frameset. it basically does like 3 or 4 frame changes on one link click. could something like this change css frames on up-arrow key press rather than link click? and could it switch between image layers in divs in each frame on up-arrow keypress, rather than switching to html pages in those frames?

<script language="JavaScript">

<!-- Begin
function loadFrames(frame1,page1,frame2,page2,frame3,page3,frame4,page4) {
eval("parent."+frame1+".location='"+page1+"'");
eval("parent."+frame2+".location='"+page2+"'");
eval("parent."+frame3+".location='"+page3+"'");
eval("parent."+frame4+".location='"+page4+"'");
}
// End -->

</script>

<a href="javascript:loadFrames(' ', ' ', ' ', ' ', ' ')" class="tooltip" title=" "><img src=" " height="45" border="0"></a>