Wie kann ich einen eigenen Cursor auf der Website einbinden?

  • Hallo Forum,


    ich möchte gerne einen eigenen Cursor auf der Website einbinden und verzweifle daran. Habe mir schon viele Infos geholt, aber ich bekomm es einfach nicht hin. Der Cursor sollte auf der ganzen Seite zu sehen sein, also auch auf Bildern und Links. Wo und was muss ich nun genau machen (bitte Noobfreundlich erklären), damit ich mich an einem eigenen Cursor erfreuen kann.


    mfG Sven

  • Suche hier im Forum benutzt ???



    HTML
    1. html * {cursor:crosshair;}


    nur mal als Beispiel...das käme in den Head unter Schritt 1. Denn du willst es auf allen Seiten....



    Dort BILDER oder anderweitige Mauszeiger anzeigen zu lassen ist größtenteils NICHT mehr möglich das ist veraltet!



    Aber hier mal noch die Anzeige was geht (mal mit der Maus drüber fahren):



    1. Handcursor

    CSS
    1. {cursor: pointer;}


    2. Cursor mit Fragezeichen

    CSS
    1. {cursor: help;}



    3. Cursor mit Fadenkreuz wie oben

    CSS
    1. {cursor: crosshair;}



    4. Kreuz

    CSS
    1. {cursor: move;}



    5. Diagonaler Cursor

    CSS
    1. {cursor: ne-resize;}



    6. Vertikaler Cursor

    CSS
    1. {cursor: n-resize;}



    7. Horizontaler Cursor

    CSS
    1. {cursor: e-resize;}



    8. Diagonaler Cursor

    CSS
    1. {cursor: se-resize;}



    9. Textcursor

    CSS
    1. {cursor: text;}



    10. Eieruhr ;)

    CSS
    1. {cursor: wait;}



    11. Eieruhr mit Pfeil

    CSS
    1. {cursor: progress;}
  • Erst einmal viel Dank für die Antwort .). Die Suche habe ich benutzt, aber eventuell nicht gründlich genug.
    Ich werde das heute mal im laufe des Tages probieren, was du mir empfohlen hat. Warum gehen eigentlich keine bzw. fast keine Bilder mehr? Hatte die Idee das Favicon als xxx.cur zu verwenden.

  • schau mal hier mit dem Internet Explorer an und dann ma mit einem anderen...dort ist das ganze noch aus Version 8 übernommen deswegen im stylesheet noch der cursor vorhanden...hab das nie erweitert...aber
    ein Bild alleine reicht da nicht aus...nicht jeder Browser unstützt jedes Format...du kannst wenn du unbedingt einen eigenen haben willst dir diesen erstellen...dann aber in 3 Formaten...


    .cur .png .gif


    das würde dann so aussehen im style Bereich


    CSS
    1. html * {cursor:url(cursor/logo_cursor.cur), url(cursor/logo_cursor.png), url(cursor/logo_cursor.gif), auto}


    Wenn du noch den Blog benutzt solltest du entweder den vollen Link dort rein schreiben oder du machst noch einmal drei Angaben dazu mit dem Vorsatz ../


    also so:


    CSS
    1. html * {cursor:url(cursor/logo_cursor.cur), url(cursor/logo_cursor.png), url(cursor/logo_cursor.gif), url(../cursor/logo_cursor.cur), url(../cursor/logo_cursor.png), url(../cursor/logo_cursor.gif), auto}


    Opera zeigt das nicht an...FF und IE ja mehr hab ich nicht getestet...

  • Hallo


    und nochmals danke. Wenn ich das jetzt richtig verstanden habe, dann brauche ich den Code aus deiner ersten Antwort jetzt nicht in den Head einfügen? Statt dessen im Style Bereich den Code mit den 3 Dateien/Endungen. Wo bzw. wie komme ich in den Style Bereich um das einzufügen? Habe keinen Plan :-[


    mfG Sven

  • Doch das kommt unter Schritt 1 wenn du es auf allen Seiten haben willst...meinte die style Angabe davor setzen da ich keine Lust hatte das überall zu machen....


    und zwar das hier


    HTML
    1. <style type="text/css">
    2. html * {cursor:url(cursor/logo_cursor.cur), url(cursor/logo_cursor.png), url(cursor/logo_cursor.gif), auto}
    3. </style
  • Ah ... genial, wir kommen der Sache schon näher :). Wenn ich jetzt den Code im Head einfüge, dann sehe ich zumindest schon mal den Cursor. Allerdings wird mir jetzt auch oben links der Titel der Website angezeigt. Nehme ich den Code wieder raus, dann ist auch der Titel verschwunden. Und wie bewerkstellige ich es, das der Cursor auch über den Links und Bildern zu sehen bleibt und sich nicht in den Standard Cursor ändert?

  • Bitte mal nen Screenshot machen das ich das sehen...oder nen Link geben...


    theoretisch greift das überall...nun gut dann wird das html * so erweitert


    CSS
    1. html *, img


    müsste ich mir aber gezielter ansehen um das genauer zu sagen ob das reicht.