{"id":1234,"date":"2009-01-08T20:22:34","date_gmt":"2009-01-08T18:22:34","guid":{"rendered":"http:\/\/www.frische-zitronen.de\/?p=1234"},"modified":"2017-12-03T11:06:35","modified_gmt":"2017-12-03T09:06:35","slug":"maustuning-benutzerdefinierte-cursor-bilder-custom-cursor-images","status":"publish","type":"post","link":"https:\/\/www.jukemedia.de\/blog\/2009\/01\/maustuning-benutzerdefinierte-cursor-bilder-custom-cursor-images\/","title":{"rendered":"Maustuning: Benutzerdefinierte Cursor Bilder (custom cursor images)"},"content":{"rendered":"

\"maus\"So, Feierabend f\u00fcr heute – aber damit die Welt mal wei\u00df, womit Webdesigner ihre Zeit vertr\u00f6deln, m\u00f6chte ich verraten, dass ich heute gute 4 Stunden damit verbracht habe, herauszufinden, wie ich einen benutzerdefinierten Cursor auf eine Webseite bringe.<\/p>\n

 <\/p>\n

Grunds\u00e4tzlich kann man – zumindest im IE und im FF – eigene Bilder als Cursor-image einbinden. Die Krux ist nur, dass nicht alle Browser alle Grafikformate unterst\u00fctzen und auch nicht unter allen Betriebssystemen. So unterst\u00fctzt z.B. der Internet Explorer nur .cur und .ani als Format, w\u00e4hrend Firefox .ani \u00fcberhaupt nicht und unter Linux .cur nicht unterst\u00fctzt. (Quelle: self-html<\/a>) Aus diesem Grund ist es ratsam immer eine Alternative zum Bild anzugeben. <\/p>\n

Via .css sieht es dann beispielsweise so aus:<\/p>\n

\na {cursor: url(images\/einbild.cur), pointer;}\n<\/pre>\n
Wenn also das Bild aus welchen Gr\u00fcnden auch immer nicht geladen wird, erscheint Gottes Zeigefinger ;-).<\/p>\n
Aber wer jetzt denkt, dass es das schon war, irrt. Im FF kann man als Bild auch ein .gif nehmen, der IE will jedoch (wie schon erw\u00e4hnt) ein .cur oder .ani haben. Dazu braucht man ein spezielles Programm. Ich habe mir Axialis<\/a> als Testversion runtergeladen. Die Software gef\u00e4llt mir sehr gut und wird wohl demn\u00e4chst als Vollversion erworben werden. Vorerst jedoch m\u00f6chte ich mir auch noch Microangelo<\/a> anschauen. Axialis kann sehr gut .cur Dateien erstellen – ob nun selbst gepixelt oder \u00fcber Einf\u00fcgen von Bildern. Es werden verschiedene Gr\u00f6\u00dfen angeboten, die gr\u00f6\u00dfte Gr\u00f6\u00dfe ist 128×128 pixel. Alles ganz toll, wenn einem nur nicht der IE wieder einen Strich durch die Rechnung machen w\u00fcrde. Dem kann man n\u00e4mlich so gro\u00dfe .cur Dateien nicht vorsetzen, er verkleinert das automatisch auf die Standardgr\u00f6\u00dfe von 32×32 Pixel – jedenfalls habe ich keine M\u00f6glichkeit gefunden, die ihn dazu veranlassen k\u00f6nnte, die Bilddatei in Originalgr\u00f6\u00dfe darzustellen. <\/p>\n
Wenn man jedoch ein Cursorbild m\u00f6chte, welches sehr detalliert ist, kann man das f\u00fcr den IE schlichtweg vergessen. Eine kleine Tinkerbell ist nur noch als Fleck zu erkennen. Also m\u00fcsste man zwei Bilder machen: ein gr\u00f6\u00dferes f\u00fcr den FF, ein kleineres f\u00fcr den IE und unter Umst\u00e4nden f\u00fcr den IE ein ganz anderes Motiv nehmen.<\/p>\n
Alles in allem ist das grafisch eine ziemlich aufw\u00e4ndige und damit auch teure Angelegenheit, wenn man nicht unter den frei downloadbaren Cursorbildern etwas findet, was auf Anhieb passt. <\/p>\n
_
\nBildquelle: istockphoto<\/cite><\/p>\n","protected":false},"excerpt":{"rendered":"
So, Feierabend f\u00fcr heute – aber damit die Welt mal wei\u00df, womit Webdesigner ihre Zeit vertr\u00f6deln, m\u00f6chte ich verraten, dass ich heute gute 4 Stunden damit verbracht habe, herauszufinden, wie ich einen benutzerdefinierten Cursor auf eine Webseite bringe.
\n 
\nGrunds\u00e4tzlich kann man – zumindest im IE und im FF – eigene Bilder als Cursor-image einbinden. Die Krux  … Weiterlesen<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[14,340,341,342,343],"yst_prominent_words":[],"class_list":["post-1234","post","type-post","status-publish","format-standard","hentry","category-webdesign","tag-webdesign-2","tag-corsor-images","tag-cursor","tag-tipps","tag-tricks"],"_links":{"self":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1234","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/comments?post=1234"}],"version-history":[{"count":1,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1234\/revisions"}],"predecessor-version":[{"id":4024,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/posts\/1234\/revisions\/4024"}],"wp:attachment":[{"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/media?parent=1234"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/categories?post=1234"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/tags?post=1234"},{"taxonomy":"yst_prominent_words","embeddable":true,"href":"https:\/\/www.jukemedia.de\/blog\/wp-json\/wp\/v2\/yst_prominent_words?post=1234"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}