Is there any way when people open the web page with a couple of images and when the viewer puts his mouse in a certain area span outside of the image, the mouse is attracted to the image just like a magnet? Is it possible to do? Please suggest.

Is there any way when people open the web page with a couple of images and when the viewer puts his mouse in a certain area span outside of the image, the mouse is attracted to the image just like a magnet? Is it possible to do? Please suggest.

• javascript
• jquery
• html
• css

• This may help you : Move the mouse pointer to a specific position? – Anujith Commented Feb 27, 2013 at 6:36
• @A.V Thank you for the link. But the image should attract the mouse pointer just like a magnet attracts iron particles if it is in a certain area span outside it. Can this be possible? – programmer Commented Feb 27, 2013 at 6:43
• You can't move the mouse, but you could make the mouse the "magnet", and move the image. – jches Commented Feb 27, 2013 at 6:55

4 Answers 4

No. You can't controll mouse pointer with JavaScript.

There is no way for any webpage to force the user's mouse to a certain location. Allowing this would have huge malicious repercussions.

An alternative might be when the user hover's over the specified area, the image grows to fill the area.

Amazon filed a patent regarding gravity-based links, that would, somewhat, be similar to what is discussed here...

http://patft.uspto.gov/netacgi/nph-Parser?Sect1=PTO1&Sect2=HITOFF&d=PALL&p=1&u=%2Fnetahtml%2FPTO%2Fsrchnum.htm&r=1&f=G&l=50&s1=8386927.PN.&OS=PN/8386927&RS=PN/8386927

I would love to see how this could be done in jQuery too, tho !

Yes. You can control mouse pointer with JavaScript.

Here is a very beautiful example from Codrops.

There are a lots of others you can find on codepen.io.
Here is one: NodeCursor.

$(function() {
// init plugin
NodeCursor({
    cursor: true,
    node: true,
    cursor_velocity: 1,
    node_velocity: 0.15,
    native_cursor: "none",
    element_to_hover: ".nodeHover",
    cursor_class_hover: "disable",
    node_class_hover: "expand",
    hide_mode: true,
    hide_timing: 2000
    });
});