Search code examples
csslaravelimagemouse-cursor

Use an image as cursor with laravel project

I would like to see an image as cursor if the pointer is inside a div.

This is my code:

FileController.php

public function addMarkClientFile(File $file)
{
        $imagePath = asset('/img/mark-facsimile.png');
        return view("documents.addMark", compact("imagePath"));
}

addMark.blade.php

@extends('layout.master')
@section('style')
    @parent
    <style>
        .canvas-with-cursor {
            cursor: url('{{ $imagePath }}'), crosshair !important;
        }
    </style>
@stop
@section('content')
....
<div class="canvas-with-cursor" id="pdf-preview"></div>
...
@stop

But I don't see the image but the 'crosshair' as fallback. I also tried with an image get from an url on the web, and it works, so I think it is a problem with my url.

The image is located into /public/img/ folder.

If I debug it into the browser I get this "http://site.loc:9080/img/mark-facsimile.png" and trying to open the url, I can get the image without issue.

I also tried to change asset('/img/mark-facsimile.png') with url('/img/mark-facsimile.png') but it doesn't change.

Solution

  • hey I think I found what the issues is:

    Icon size limits While the specification does not limit the cursor image size, user agents commonly restrict them to avoid potential misuse. For example, on Firefox and Chromium cursor images are restricted to 128x128 pixels by default, but it is recommended to limit the cursor image size to 32x32 pixels. Cursor changes using images that are larger than the user-agent maximum supported size will generally just be ignored.

    Your code works! I have tested on my own Laravel application and had the same issue, then I reduced the dimensions of the cursor image and it worked fine!

    Hope it helps!