hi Ashutosh!
I went through your problem. i think we can do it. i didn’t worked on these
type of tasks but i studied the possibilities. i think we can do it by using a
combination of CSS and Java script. I
will definitely try to work on your task.
Mean while check this code which I wrote to change the
position of textbox along with mouse pointer (here I used this to display time
and an image) just go through this code and you will get some idea. Here I
accessed the text box in my JavaScript using getElementById(“clock” ) method.
Then I set the position of the textbox by setting the values of style attribute
based on the mouse positions.
Why I am giving this code is, it gives you
the basic idea. If I can do this in JavaScript then it is possible to solve
your problem too. But little bit tough. Here in my code I didn’t used any mouse
events. We have onMouseDown do onMouseUP events in JS. If we make use of those
mouse events we can do it I think. You start working on this and I will join
you soon. Coz now-a-days I am working on Flash and ActionScript coz my boss
asked me to work on these technologies. If I get some time I will definitely
work on this. You have any ideas don’t hesitate to share with me. If you still
have any confusion in getting started, buzz me back and I’ll try to explain you
in some other way.
Here is my code.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
.clock{
border:none;
font-size:17px;
color:red;
background-image:url('clock1.GIF');
background-repeat:no-repeat;
background-position: right middle;
line-height:30px;
}
</style>
</head>
<body>
<script language="JavaScript">
var IE = document.all?true:false
document.onmousemove = dispTime;
function dispTime()
{
var mosx = 0;
var mosy = 0;
mosx = event.clientX + document.body.scrollLeft;
mosy = event.clientY + document.body.scrollTop;
if (mosx>999)
mosx=800;
if (mosy>575)
mosy=500;
var temp=new Date();
var h=temp.getHours();
var mins=temp.getMinutes();
var s=temp.getSeconds();
if(s<10)
s="0"+s;
if( h >12)
var m="PM";
else m="AM";
if(h>12) h-=12;
if(mins<10)
mins="0"+mins;
var time= h+":"+mins+":"+s+" "+m;
h="";mins="";s="";t="";
var x=document.getElementById("clock");
document.f1.dispArea.value=time;
var tx= document.getElementById("clock").style.left=mosx+10;
var tx= document.getElementById("clock").style.top=mosy+10;
//document.form1.clock.value=time; function for time not yet called
//window.status= mosx+" "+mosy;
setTimeout("dispTime();",1000);
//window.status=mosx+" -"+mosy;
}
</script>
<div id="clock" style=" position:absolute;left:100; top:200;">
<form name="f1">
<input name="dispArea" type="text" class="clock" value="" size="12">
</form>
</div>
</body>
</html>