|
|
 |
|
|
Thread Tools | Display Modes |
Apr 29th, 2005, 11:42 AM
|
#1 |
|
PFO Founder
  
Join Date: Mar 2004
Location: Fargo, ND
Posts: 1,649
Rep Power: 10
    |
javascript and dhtml
Well im working on this script for class that is suppose to have an image follow around the mouse as the mouse moves around the screen but if the user double clicks the image will stay put and disable the image from following the mouse until the user double clicks again then it will start following the mouse again. well i dont want anyone to give me code on how to do this i just would like some help on getting the image to stay put on the double click. here is the code i currently have that makes the image follow the mouse pointer.
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- onmousemove.html -->
<!-- Demonstrating the onmousemove event -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Event Model - onmousemove event</title>
<script type = "text/javascript">
<!--
function updateMouseCoordinates()
{
coordinates.innerText = event.srcElement.tagName +
" (" + event.offsetX + ", " + event.offsetY + ")";
}
function follow()
{
myImage.style.top = event.y;
myImage.style.left = event.x;
}
function stay()
{
myImage.style.top = event.y;
myImage.style.left = event.x;
}
document.ondblclick = stay;
document.onmousemove = follow;
// -->
</script>
</head>
<body style = "background-color: wheat" onmousemove = "updateMouseCoordinates()">
<img id="myImage" src = "orange.gif" style = "position: absolute;
top: 100; left: 100" alt="orange" />
</body>
</html>again im just looking for ideas on how to do this we are suppose to use CSS absolute positioning, onmousemove and event.x/event.y to have an image follow the mouse as the user moves the mouse over the Web page. Disable this feature if the user double clicks (ondblclick). thats the actuall assignment if i didnt explain it well.
__________________
BIG K aka Kyle Programming Forums Kyle K Online Please do not PM or email me programming questions. Post them in the forums instead. |
|
|
|
Apr 29th, 2005, 11:57 AM
|
#2 |
|
PFO Founder
Join Date: Mar 2004
Location: Fargo, ND
Posts: 1,649
Rep Power: 10
|
ok well i got it working but im still looking for another way to do it cause this i dont know if it is how he would want it but it does work so if anyone else knows of a better way let me know. here is my code
<?xml version = "1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- onmousemove.html -->
<!-- Demonstrating the onmousemove event -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>DHTML Event Model - onmousemove event</title>
<script type = "text/javascript">
<!--
var sit = 0;
function follow()
{
if(sit == 0)
{
myImage.style.top = event.y;
myImage.style.left = event.x;
}
}
function stay()
{
if (sit == 1)
{
sit = 0;
myImage.style.top = event.y;
myImage.style.left = event.x;
} else {
sit = 1;
}
}
document.ondblclick = stay;
document.onmousemove = follow;
// -->
</script>
</head>
<body style = "background-color: wheat">
<img id="myImage" src = "orange.gif" style = "position: absolute;
top: 100; left: 100" alt="orange" />
</body>
</html>this is the one way if there is another please help 
__________________
BIG K aka Kyle Programming Forums Kyle K Online Please do not PM or email me programming questions. Post them in the forums instead. Last edited by big_k105; Apr 29th, 2005 at 12:00 PM. |
|
|
|
|
Apr 29th, 2005, 4:09 PM
|
#3 |
|
Expert Programmer
Join Date: Jan 2005
Location: London
Posts: 542
Rep Power: 4
|
Cool! Just out of interest... why do you want an orange following the mouse around the screen?
|
|
|
|
|
Apr 29th, 2005, 5:09 PM
|
#4 |
|
PFO Founder
Join Date: Mar 2004
Location: Fargo, ND
Posts: 1,649
Rep Power: 10
|
it was a class assignment, i dont know why he wanted it to do that but he did. but whatever i handed it in
all thats left for the class is to take the final
__________________
BIG K aka Kyle Programming Forums Kyle K Online Please do not PM or email me programming questions. Post them in the forums instead. |
|
|
|
|
Apr 29th, 2005, 6:22 PM
|
#5 |
|
I eat cake for breakfast.
Join Date: Jul 2004
Location: In my box.
Posts: 4,434
Rep Power: 9
|
That looks like the best way you could have done it to me, K.
|
|
|
|
|
May 31st, 2005, 9:56 PM
|
#6 |
|
Newbie
Join Date: May 2005
Posts: 3
Rep Power: 0
|
Total newbie here
Ok guys,don't bash me to hard. I'm totally new to this.
How would you change the img to a string (sentence).I would like for a string of words to follow the cursor instead of a img. Any help would be appreciated. Thanks. |
|
|
|
|
Jun 1st, 2005, 8:05 AM
|
#7 |
|
I eat cake for breakfast.
Join Date: Jul 2004
Location: In my box.
Posts: 4,434
Rep Power: 9
|
You'd use a <div> or a <p> instead of the image - that's all.
Last edited by Ooble; Jun 1st, 2005 at 9:16 AM. |
|
|
|
|
Jun 1st, 2005, 9:13 AM
|
#8 |
|
Programming Guru
Join Date: May 2004
Location: Brandon, Manitoba, Canada
Posts: 2,023
Rep Power: 7
 |
Ooble's right.
__________________
Profanity is the one language that all programmers understand. Check out my Blog <---updated Nov 30 2007! |
|
|
|
|
Jun 1st, 2005, 7:20 PM
|
#9 |
|
Newbie
Join Date: May 2005
Posts: 3
Rep Power: 0
|
thanks
Thanks guys. I did try those but i must not have put them in the right spot. I'll play with it somemore until i get it right. Thanks again, much appreciated by this extreme newbie.
|
|
|
|
|
Jun 1st, 2005, 8:29 PM
|
#10 |
|
I eat cake for breakfast.
Join Date: Jul 2004
Location: In my box.
Posts: 4,434
Rep Power: 9
|
It's pretty simple: replace the image tag with
<p id="myText" style="position: absolute; top: 100px; left: 100px;">Blah Blah Blah</p> |
|
|
|
|
| Bookmarks |
| Currently Active Users Viewing This Thread: 1 (0 members and 1 guests) | |
| Thread Tools | |
| Display Modes | |
|
|
Linear Mode
