Benutzerdefinierter Cursor-Interaktionspunkt – CSS / JQuery

Lesezeit: 3 Minuten

AlienWebguy

Ich versuche, einen benutzerdefinierten Cursor für ein Online-Spiel zu verwenden, in diesem Fall ist es ein Scharfschützen-Zielfernrohr.

Das Problem ist, wenn ich über CSS auf den Cursor verweise, befindet sich der Interaktionspunkt immer noch oben links im Symbol, während er sich im toten Zentrum des Symbols befinden muss, damit der Cursor einen Sinn ergibt.

Hier ist der Cursor:

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur),default;

Hier ist eine Demo: http://jsfiddle.net/9kNyF/

Wenn Sie den roten Punkt vom Cursor über den roten Punkt setzen, den ich in der Demo erstellt habe, wird das Click-Ereignis nicht ausgelöst. Sie müssen versuchen, mit der oberen linken Ecke darauf zu zielen.

Wenn Sie den Cursor zurück auf setzen cursor:default; Sie werden sehen, dass das Click-Ereignis problemlos ausgelöst wird, es ist nur eine Frage des “Zielens” des Cursors.

Das Spiel ist in JQuery codiert, also wenn ich dort etwas Logik für den Cursor-Offset oder etwas Lahmes hinzufügen muss, sei es so. Idealerweise möchte ich, dass dies ein CSS-Fix ist.

Vielen Dank!

Es funktioniert bei mir im IE9 ohne Probleme.

– Jason Gennaro

1. August 2011 um 2:55 Uhr
@Jason, um fair zu sein, ich habe nicht im IE getestet, haha, aber gut zu wissen! Danke 🙂

– AlienWebguy

1. August 2011 um 3:08 Uhr

Sie müssen nur die Hotspots angeben <x> und <y> Position in Ihrem CSS:

In Ihrem Beispiel befindet sich die Mitte 24 Pixel von oben / links (riesiger Arschcursor lol).

cursor:url(http://www.seancannon.com/_test/sniper-scope.cur) 24 24,default;

http://jsfiddle.net/9kNyF/15/ sehen?

@TrymBeast Wenn Sie Jason Gennaros Kommentar unter der Frage lesen, impliziert er, dass IE9 das Symbol standardmäßig zentriert

– AlienWebguy

4. April 2012 um 13:25 Uhr

brenjt

Versuchen Sie, dies um Ihren Ereignis-Listener herum zu platzieren, sofern das Click-Ereignis nicht ausgelöst wird.

$(function(){
    $('#point').click(function(){
        alert('clicked point');
    });
});

Mit der Zentrierung des Fadenkreuzes ist es möglicherweise einfacher, ein Div mit dem Hintergrund des Bildes zu verwenden und das Div mit jQuery an der richtigen Stelle über Ihrem Cursor zu platzieren.

<div id="crosshairs"></div>
<script>
$(function(){
    $("body").mousemove(function(e){
        var CrossHairWidth = $('#crosshairs').width();
        var CrossHairHeight = $('#crosshairs').height();
        $('#crosshairs').css('top', e.pageY - (CrossHairHeight / 2));
        $('#crosshairs').css('left', e.pageX - (CrossHairWidth / 2) );
    });
});
</script>

Sie blenden dann den Cursor aus, indem Sie Folgendes tun:
cursor: url(http://www.seancannon.com/_test/transparent.png), default;

JSFiddle umschließt den Code im JavaScript-Panel automatisch damit, wenn eine bestimmte Einstellung gesetzt ist (was es auch ist).

– icktoofay

31. Juli 2011 um 4:09 Uhr
Aber wenn die #crosshairs div ist immer unter dem Cursor, wie würden die Klicks jemals durch das div gehen und auf das klicken, was ich auf der Leinwand anklicken möchte?

– AlienWebguy

31. Juli 2011 um 4:42 Uhr
Auch das Click-Event funktioniert, nur fehlt dem Fadenkreuz der Punkt. Ich kann das Klick-Ereignis mit dem Fadenkreuz auslösen, wenn ich den roten Punkt etwa 15 Pixel nach unten und rechts neben den roten Punkt in der ziele #wrapper. Stellen Sie die ein cursor:default; und Sie werden sehen, dass Sie es gut anklicken können.

– AlienWebguy

31. Juli 2011 um 4:43 Uhr
@AlienWebguy, wenn Sie hinzufügen pointer-events: none; zum #crosshairs es wird das Click-Ereignis darauf ignorieren.

– brenjt

1. August 2011 um 2:30 Uhr
@AlienWebguy Ich bin sicher, eine CSS-Lösung wäre sehr nett. Aber wenn Sie brenjt’s verwenden möchten, können Sie das Click-Ereignis umgehen, das auf das Fadenkreuz feuert, mit etwas wie dem Folgenden: jsfiddle.net/tXFdT

– Paulus

1. August 2011 um 3:01 Uhr

Unabhängig davon, welches Werkzeug Sie zum Erstellen des Cursors verwendet haben, sollte es eine Option zum Verwalten des Klickzielbereichs geben. Sie würden Ihren Schwanz jagen und nach einer Javascript/CSS-Lösung suchen.

Ich habe diesen Cursor tatsächlich online gefunden. Den Cursor neu zu erstellen ist für mich in Ordnung, aber ich erinnere mich, dass die meisten dieser Cursor-erstellenden Apps zwielichtiger Shareware-Mist sind, haha. Irgendwelche Empfehlungen?

– AlienWebguy

1. August 2011 um 2:41 Uhr
@AlienWebguy Ich fand das die beste Option. Plugin für Photoshop (funktioniert mit CS6 auf Mac), mit dem Sie aktuelle Dateien speichern können. telegraphics.com.au/svn/icoformat/trunk/dist/README.html

– Kostia

30. Mai 2013 um 19:40 Uhr

10556300cookie-checkBenutzerdefinierter Cursor-Interaktionspunkt – CSS / JQuery

#Abfrage #CSS #Javascript #Mauszeiger