CSS Change Custom Cursor Image Origin (Hotspot) to Center

CSS change custom cursor image origin (hotspot) to center

One solution would be to move the position of your image to match the mouse pointer

cursor: url(image) [x y|auto];

Doesn't respond to the question but this is working

HTML

div
{
    width: 600px;
    height: 100px;
    background: pink;
    cursor: url(http://placehold.it/50x30) 25 15, auto;
}

Java - setting custom cursor hotspot to center of image (.png)

Don't know if you can make a cursor that large.

Here is an example that creates a custom cursor using a BufferedImage as the Cursor image:

import java.awt.*;
import java.awt.image.*;
import javax.swing.*;

public class PaintBrushCursor
{
    public static Cursor createCursor(int brushSize)
    {
        Dimension bestSize = Toolkit.getDefaultToolkit().getBestCursorSize(0, 0);

        BufferedImage image = new BufferedImage(bestSize.width, bestSize.height, BufferedImage.TYPE_INT_ARGB );
        Graphics2D g2d = (Graphics2D)image.getGraphics();
        g2d.setColor( Color.BLACK );

        //  draw center point

        int ovalX = (bestSize.width - brushSize) / 2;
        int ovalY = (bestSize.height - brushSize) / 2;

        g2d.fillOval(ovalX, ovalY, brushSize, brushSize);

        //  draw guidelines

        int centerX = bestSize.width / 2;
        int centerY = bestSize.height / 2;
        int offset = (brushSize / 2) + 5;
        int length = 5;

        g2d.drawLine(centerX - offset - length, centerY, centerX - offset, centerY);
        g2d.drawLine(centerX + offset, centerY, centerX + offset + length, centerY);

        g2d.drawLine(centerX, centerY - offset - length, centerX, centerY - offset);
        g2d.drawLine(centerX, centerY + offset, centerX, centerY + offset + length);

        Point hotSpot = new Point(centerX, centerY);

        return Toolkit.getDefaultToolkit().createCustomCursor(image, hotSpot, "PaintBrush" );
    }

    private static void createAndShowGUI()
    {
        JPanel panel = new JPanel();
        panel.setCursor( PaintBrushCursor.createCursor(7) );

        JFrame frame = new JFrame("Paint BrushC ursor");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.add( panel );
        frame.setLocationByPlatform( true );
        frame.setSize(200, 200);
        frame.setVisible( true );
    }

    public static void main(String[] args)
    {
        EventQueue.invokeLater( () -> createAndShowGUI() );
/*
        EventQueue.invokeLater(new Runnable()
        {
            public void run()
            {
                createAndShowGUI();
            }
        });
*/
    }
}

Why is my custom cursor's position way off?

First, in IE I had to have the CSS as such:

cursor: url(../Images/cursor.cur), pointer;

Then the way I fixed it was to go to this website: http://www.cursor.cc/? and use it to set the hotspot (graphically). Afterwards, it all worked as I expected to.

Now granted, I won't be accepting my answer as the answer. Because I'm sure someone else will run into a similar problem. And there will be Opera, Firefox, and Chrome versions of this issue. Also, I'm sure that there will be javascript, jquery, and plain css solutions for other browsers as well.

With that said, the plain CSS (for any browser other than IE) to fix the hotspot issue (whether the icon is .png, .gif, .cur, .ani, etc.) is:

cursor: url(../Images/deletecursor.cur) 5 -5, pointer;

css cursor url positioning

Yes - just supply the hotspot coordinates:

cursor: url("x.gif") 15 15, move;

However bear in mind that this will break some browsers. Ideally, you need:

cursor: url("x.cur"), move;
cursor: url("x.gif") 15 15, move;

Where x.cur is a "proper" cursor file. If you need a program to make one, try RealWorld Cursor Editor.

Cursor point to left bottom corner

you can change its direction in photoshop if it is not that neccesary
if you want to change direction use transform rotate and set deg according to your need

  div{
        width:200px; height:200px; background:red;
        position:relative;
    }
.cursor{ position:absolute;cursor:url(images/eyedropper.png) 25 25, auto;
            transform: rotate(90deg);}

<div> <div class="cursor"></div></div>

CSS Cursor pointer with SVG image

Your image is simply too large. Reduce the width and height to something less than 128px.

Icon size limits for cursors in CSS | MDN

...the limit of the cursor size is 128×128px. Larger cursor images are ignored.

Example:

cursor: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' ...") 16 16, pointer;

https://jsfiddle.net/bx4og7n5/

Edit: Added hotspot (center coordinates) for the cursor (see Dennis Bauszus' comment)

Custom CSS cursor click point

CSS3 supports setting the midpoint of a cursor image, where the hotspot of the pointer (i.e. the point at which clicks are registered) is:

cursor: url(mycur.cur) 6 6, auto;

Where the two 6 values mean 6 pixels from the left and 6 pixels from the top respectively. The default hotspot is always the top left corner of your image, i.e. 0 0.

Browser support for this feature may be rather poor though as it's a CSS3 feature, so it's not something you should rely on just yet. (That said, Firefox has supported it from version 1.5!) If a browser can't interpret the coordinates, the cursor property will be ignored, so be careful.

---

Related Topics