Entry
how can I put the same image at different x coordinates depending on user input
Dec 21st, 2000 17:30
Juergen Thelen, ameet vasu,
Use CSSP elements like the DIVs in the sample below. Place your picture
inside these layers and then just set the appropriate style properties
depending on user input.
Here's a quickie showing this technique:
--- snip ---
<html>
<head>
<title>FAQTS - Juergen Thelen - Positioning image depending on user
input</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
var objMyDiv1;
var objMyDiv2;
var objField1;
var objField1;
var nn4 = (document.layers);
function SetNewXPos()
{
var x1 = (objField1.value.length > 0) ? parseInt(objField1.value) : 0;
var x2 = (objField2.value.length > 0) ? parseInt(objField2.value) : 0;
if (x1 > 600) x1 = 580;
if (x2 > 600) x2 = 580;
objMyDiv1.left = x1;
objMyDiv2.left = x2;
return false;
}
function InitObjPointers()
{
objMyDiv1 = (nn4) ? document.layers["MyDiv1"] : document.all
["MyDiv1"].style;
objMyDiv2 = (nn4) ? document.layers["MyDiv2"] : document.all
["MyDiv2"].style;
objField1 = (nn4) ?
document.layers["MyFormDiv"].document.MyForm.MyTextfield1 :
document.MyForm.MyTextfield1;
objField2 = (nn4) ?
document.layers["MyFormDiv"].document.MyForm.MyTextfield2 :
document.MyForm.MyTextfield2;
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" onLoad="InitObjPointers()">
<div id="MyDiv1" style="position:absolute; width:200px; height:115px; z-
index:1; left: 64px; top: 43px"><img src="whatever.gif"></div>
<div id="MyDiv2" style="position:absolute; width:200px; height:115px; z-
index:2; left: 231px; top: 178px"><img src="whatever.gif"></div>
<div id="MyFormDiv" style="position:absolute; width:583px;
height:115px; z-index:1; left: 107px; top: 339px">
<form name="MyForm" onSubmit="return SetNewXPos()">
New x-coordinate for upper instance of whatever.gif
<input type="text" name="MyTextfield1"><br>
New x-coordinate for lower instance of whatever.gif
<input type="text" name="MyTextfield2">
<br>
<br>
<input type="submit" name="Button" value="Set new x coordinates">
</form>
</div>
</body>
</html>
--- snap ---
Hacked on the fly, so no explicit browser checking (assumes IE4+ if
browser is not NN4) and no complete input handling (catches only empty
fields, values below zero [set to 0] and values above 580 [set to 580]).
Be aware that onLoad="InitObjPointers()" is used to setup cross browser
object pointers to simplify object referencing, and especially
the "misuse" of a form submission to call SetNewXPos()...
In case you are unfamiliar with the latter:
"return SetNewXPos()" will return to onSubmit with the return value
given by the function SetNewXPos(). This return value will always be
false. A return value of false is necessary to cancel the onSubmit
event fired by clicking the button, because there wasn't really a form
to submit... :O)
With a return value of true (or omitted) onSubmit would treat the click
like an usual form submission, thus reloading the document, and you
wouldn't see any movement of your images at all... :O)
Hope it helps.
Juergen
