Menu
I have placed the following code at [URL=http://www.nova.edu/~rumsey/css/Stereo/Viewer.html]http://www.nova.edu/~rumsey/css/Stereo/Viewer.html
I do not get any errors, but I also do not get any actions.
😮 Nothing happens.
What I am trying to do is dynamically increase or decrease the seperation between the two images displayed. The images are slightly offset, so that if fused visually it is possible to view the room in 3-D.
Is what I am trying to do acceptable CSS code? I have been unable to find any information using the search function of this forum that addresses this question of re-positioning the elements of the page from the original location.
I have seen sites that “jiggle” an image. That is not what I am trying to do here, but I assume the coding would be similiar to relocate the image.
Appreciation and thanks for any suggestions.
[code]
<html><head>
<title>Stereo Viewer</title>
<style type=”text/css”></style>
<script language=”javascript” type=”text/javascript”>
<!–
var img_left = 0;
var img_right = 0;
function MoveOut() {
img_left = img_left – 1;
document.getElementById(‘left’).left = img_right.toString()+’px’;
img_right = img_right + 1;
document.getElementById(‘right’).left = img_left.toString()+’px’;
}
function MoveIn() {
img_left = img_left + 1;
document.getElementById(‘left’).left = img_right.toString()+’px’;
img_right = img_right – 1;
document.getElementById(‘right’).left = img_left.toString()+’px’;
}
//–>
</script>
</head><body>
<center>
<img id=”left” src=”bIMG_0185.jpg” height=”250″ width=”300″ style=”position:relative;left:0px;”>
<img id=”right” src=”bIMG_0186.jpg” height=”250″ width=”300″ style=”position:relative;left:0px;”>
<P>
<button onClick=”MoveOut()”><</button>
<button onClick=”MoveIn()”>></button>
</center>
</body></html>