Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

On mouseover

Status
Not open for further replies.
FengShui1998

FengShui1998

MIS
Apr 27, 1999
705
US
Hello,

I have a button or a jpeg file on a web page where if the user puts the cursor over it, the object moves away from the cursor so that he/she is unable to click it. I'ver seen this before but need some help.

Anyone have any ideas?

Thanks

fengshui_1998
 
Sort by date Sort by votes
I don't know why you'd want it but is this the sort of thing?
This just moves it 20 pixels to the right and then puts it back afterwards. The alert should never pop up.
Code: 
<html>
<head>
<script>
var whereitwas;
function moveIt(what){
  whereitwas=what.style.left;
  what.style.left=event.x+20;
}

function returnPic(what){
  what.style.left=whereitwas;
}
</script>
</head>

<body>

<img id=&quot;thePic&quot; style=&quot;position:absolute;left:100;top:100;&quot; src=&quot;blah.jpg&quot; onMouseout=&quot;returnPic(thePic)&quot; onMouseover=&quot;moveIt(thePic)&quot; onClick=&quot;alert('clicked it!')&quot;>

</body>
</html>
Hope I helped / Thanks for helping
if ((x<10&&y<10) &&(((parseInt(x.toString()+y.toString())-x-y)%9)!=0)){ alert(&quot;I'm a monkey's uncle&quot;); }
 
Upvote 0 Downvote
Ah, the old runaway button trick :) It's even more fun to take a screenshot of a desktop, cut the icons out as seperate images, set them up to runaway, and then make the new webpage the background for the desktop and hide the real icons. The user goes to click on an icon as they usually would but they all keep running away :)
(I did this in a computer lab once, couldn't stop laughing for a while)
I'll see if I can't find the file for you and post it...
-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 
Upvote 0 Downvote
HellTel & Tarwn,

Thanks for your replies. HellTel, that's almost like what I was thinking, but Tarwn, do you have a better one?

Thanks,
fengshui_1998
 
Upvote 0 Downvote
I had one but I can't find it now. The basic idea is that you over ride the mouse move event to direct it to a function of your choosing. That function loops through all the objects of a certain name (like mover) in the document.getElementsByName(&quot;mover&quot;) collection checking the top and left coordinates against the clientX and clientY coordiantes of the mouse. If the mouse is within a certain distance from the object on the x or y coordinate, the script changes the objects position to compensate (again the left or top attribute).

This allows you to have multiple moveable objects and to also fine tune the &quot;closeness&quot; that the object reacts to, by declaring the x or y distance as either global variables, and thus the same for every element, or as extra attributes inside your &quot;mover&quot; tags, and thus differant for every object.

Sorry I don't have the code around anymore, I'll have to sit down sometime and rewrite it.

-Tarwn --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- --- ---
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
773
spamjim
spamjim
lmcate
  • Locked
  • Question
From HTML Page open an MDB files on the server and work
Replies
0
Views
204
lmcate
lmcate
lmcate
  • Locked
  • Question
Create a Expand/Collapse FAQ Accordion, Collapse other on Click 1
Replies
2
Views
713
Mike Lewis
Mike Lewis
PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
893
spamjim
spamjim
waubain
  • Locked
  • Question
Prevent user from getting a 404 error if click on a hover text displaying a hidden image. 1
Replies
5
Views
223
jjgupta915
jjgupta915

Part and Inventory Search

Sponsor

Back
Top