attach image or div to mouse cursor in firefox

Question

hi i want to attach the image or div element to the cursor in firefox in my application when mouseover the some element than image will be attached to cursor.

thanks rahul

Answer 1

You can use an image as the mouse cursor fairly easily using CSS.

div {
    cursor: url(mypointer.gif), auto;
}

This will make the cursor change to the graphic you specify when you hover over a div tag. You will need to change the CSS selector in the example to match the parts of your page that you want to have the custom mouse pointer. (you'll also obviously need to create the graphic and reference the correct name for it in the CSS code).

Note that there are some restrictions on this (browser compatibility, size of image, etc). This page will tell you more: http://www.quirksmode.org/css/cursor.html (scroll down to the bit about the URL style to see it in use and further info)

If you want more than that (eg a whole div following the mouse, or a bigger graphic than supported by the above, then you'll need to use Javascript. Your best option is to use a javascript library like JQuery with an appropriate plug-in.

Here is a link to a JQuery plug-in that will allow you to set up tooltips with text and images. Demos and example code are included. You'll need to download JQuery and this plug-in, and add them to your site.