Anzeige

Cursor + Hover

Cursor + Hover | PSD-Tutorials.de

Erstellt von n0nam3, 22.12.2007.

  1. n0nam3

    n0nam3 Aktives Mitglied

    1
    Dabei seit:
    30.05.2006
    Beiträge:
    1.079
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop & Illustrator CS5
    Kameratyp:
    Canon EOS 350D
    Cursor + Hover
    Hallo ihr...

    ich bastel gerade aus Spaß mit einem Kumpel an einem Template rum.
    Wir haben gesehen, dass eine ähnliche Seite (tarius.de) einen anderen Cursor verwendet
    und ich hab mich mal ein bisschen umgesehen und auch einiges entdeckt,
    wie man so etwas einbaut usw, allerdings funktioniert das nicht so ganz :hmpf:

    Ich habe schon folgendes probiert:
    (kann ja in head oder?)

    Code (Text):
    1. <HEAD>
    2. <style type="text/css">
    3. <!--
    4. body
    5.  
    6. [INDENT]cursor: url(cursor.ani);[/INDENT]
    7.  
    8. }
    9. -->
    10. </style>
    11. </HEAD>
    Der gewünschte Cursor wird aber nicht angezeigt :(
    Das ist mein erstes Problem, dazu kommt noch,
    dass sich der Cursor verändern soll, sobald er einen Link trifft...

    Ich hab da irgendwas von...:

    Code (Text):
    1. a {cursor: url(cursor.ani);}
    ...gesehen, aber das passte nun schon mal gar nicht!

    (Zur Info: cursor.ani wird bei mir dann hand.ani heißen, ich weiß, dass ich das ersetzen muss)

    Kann mir da jemand weiterhelfen?
    Ich hab jetzt nur leichte Grundkenntnisse, also bitte kein Fachchinesisch :lol:
    (SelfHTML spuckt auch nix hilfreiches aus!)

    Lg
    n0nam3

    Edit: Ich bin jetzt erstmal 3 Wochen weg, also postet bitte alles, was euch dazu einfällt!
    Ich antworte dann, wenn ich wieder zurück bin ;) Danke!!
     
    Zuletzt bearbeitet: 22.12.2007
    #1      
  2. alicexx

    alicexx Schreibfaul

    Dabei seit:
    01.11.2004
    Beiträge:
    102
    Geschlecht:
    weiblich
    Software:
    Photoshop
    Kameratyp:
    Fuji FinePix S3500
    Cursor + Hover
    AW: Cursor + Hover

    Du weisst schon, dass das nur der IE unterstuetzt, ja?

    Ansonsten, schonmal kontrolliert ob auch der angegebenen Pfad stimmt?
     
    #2      
  3. dafuca

    dafuca OT-King

    Dabei seit:
    23.03.2007
    Beiträge:
    99
    Geschlecht:
    männlich
    Ort:
    Berlin/ROSTOCK
    Software:
    Photoshop, Flash, Dreamweaver...
    Kameratyp:
    Nikon D90
    Cursor + Hover
    AW: Cursor + Hover

    OT-> ich find den effekt...nun ja nicht so prikelnd...lass ma lieber <-OT
     
    #3      
  4. EdeBoi

    EdeBoi Sony Ericsson Experte

    Dabei seit:
    02.08.2007
    Beiträge:
    29
    Geschlecht:
    männlich
    Ort:
    Köln
    Software:
    Adobe Photoshop CS2
    Cursor + Hover
    AW: Cursor + Hover

    @ alicexx

    Funktioniert bei mir auch im FF!
     
    #4      
  5. Cursor + Hover
    AW: Cursor + Hover

    Hi, ich weiß nicht ob du den Rest des Headers weggemacht hast ode so, jedenfalls hast du dort ein { vergessen (oder hast du das bloß einfach vesehentlich gelöscht???)
     
    #5      
  6. n0nam3

    n0nam3 Aktives Mitglied

    1
    Dabei seit:
    30.05.2006
    Beiträge:
    1.079
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop & Illustrator CS5
    Kameratyp:
    Canon EOS 350D
    Cursor + Hover
    AW: Cursor + Hover

    Der Effekt geht auch im FF
    und der Code ist auch richtig, es liegt eher an der Ausführung,
    denk ich...
     
    #6      
  7. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    Cursor + Hover
    AW: Cursor + Hover

    Schon mal überprüft?



    Code (Text):
    1. <HEAD>
    2. <style type="text/css">
    3. <!--
    4. body
    5. [B] {[/B]
    6. [INDENT]cursor: url(cursor.ani);[/INDENT]
    7.  
    8. }
    9. -->
    10. </style>
    11. </HEAD>


    Anicursor - Tutorial: Wie man eigene Cursor in seine Webseite einbindet


    Funzt in Mozilla/ Seamonkey/ Opera schon mal nicht...



    Ansonsten: Cascading Style Sheets { Vollreferenz zu CSS 1 und CSS 2.1 : CURSOR }
     
    Zuletzt bearbeitet: 09.01.2008
    #7      
  8. Flegma

    Flegma Nicht mehr ganz neu hier

    Dabei seit:
    22.04.2007
    Beiträge:
    164
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    C4D; Netbeans; PS CS5; Gimp
    Cursor + Hover
    AW: Cursor + Hover

    Hi n0nam3

    hab dein Problem gelöst.

    erstma ein Link, dann spar ich mir das getippel ;-)

    SELFHTML: Stylesheets / CSS-Eigenschaften / Anzeigefenster

    und hier der Quelltext für dein Problem:

    Code (Text):
    1.  
    2. <html>
    3. <head>
    4. <title>Eigener Cursor</title>
    5. <style type="text/css">
    6. <!--
    7. body,td,th {
    8.     cursor: url('http://sebastiansseite.homedns.org/Arrow.png'), auto;
    9. }
    10. a {
    11.     font-family: Verdana, Arial, Helvetica, sans-serif;
    12.     font-size: 12px;
    13.     color: #003366;
    14. }
    15. a:visited {
    16.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    17. }
    18. a:hover {
    19.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    20. }
    21. a:active {
    22.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    23. }
    24. -->
    25. </style>
    26. </head>
    27.  
    28. <body>
    29. <p><a href="deine_seite.php" target="_blank">Hallo</a></p>
    30.  
    31. </body>
    32. </html>
    33.  
    ok hoffe ich konnte dir helfen. :)

    mfg. flegma
     
    Zuletzt bearbeitet: 09.01.2008
    #8      
  9. n0nam3

    n0nam3 Aktives Mitglied

    1
    Dabei seit:
    30.05.2006
    Beiträge:
    1.079
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop & Illustrator CS5
    Kameratyp:
    Canon EOS 350D
    Cursor + Hover
    AW: Cursor + Hover

    Ich werd's mal ausprobieren ;)
    Danke schon mal...
    Auch an alle Anderen!

    Edit:

    Mein Stylesheet (aus Webspell):

    Code (Text):
    1.  
    2. body {
    3.     font-family: Verdana, Arial, Helvetica, sans-serif;
    4.     font-size: 10px;
    5.  
    6.     scrollbar-base-color:#cccccc;
    7.     scrollbar-3dlight-color:#333333;
    8.     scrollbar-arrow-color:#333333;
    9.     scrollbar-darkshadow-color:#333333;
    10.     scrollbar-face-color:#cccccc;
    11.     scrollbar-highlight-color#cccccc;
    12.     scrollbar-shadow-color:#cccccc;
    13.     scrollbar-track-color:#cccccc;
    14.     cursor: url('http://sebastiansseite.homedns.org/Arrow.png'), auto;
    15. }
    16.  
    17. table {
    18.     font-family: Verdana, Arial, Helvetica, sans-serif;
    19.     font-size: 10px;
    20.     color: #c7c7c7;
    21. }
    22. h2 {
    23.     font-family: Verdana, Arial, Helvetica, sans-serif;
    24.     font-size: 12px;
    25.     color: #c7c7c7;
    26.     text-transform: uppercase;
    27.     font-weight: bold;
    28. }
    29.  
    30. .small {  
    31.     font-family: Verdana, Arial, Helvetica, sans-serif;
    32.     font-size: 9px;
    33.     color: #c7c7c7;
    34. }
    35.  
    36. .title {
    37.     font-family: Verdana, Arial, Helvetica, sans-serif;
    38.     font-size: 11px;
    39.     color: #c7c7c7;
    40.     font-weight: bold;
    41.     background-image: url(images/title_bg.gif);
    42.     background-repeat: repeat;
    43.     background-position: left top;
    44. }
    45.  
    46. .category_big {  
    47.     font-family: Verdana, Arial, Helvetica, sans-serif;
    48.     font-size: 12px;
    49.     color: #c7c7c7;
    50.     font-weight: bold;
    51. }
    52.  
    53. .category {  
    54.     font-family: Verdana, Arial, Helvetica, sans-serif;
    55.     font-size: 11px;
    56.     color: #c7c7c7;
    57.     font-weight: normal;
    58. }
    59.  
    60. .marked {
    61.     background-color: #000000;
    62.     font-weight: bold;
    63. }
    64.  
    65. a, a:visited, a:active {
    66.     color: #c7c7c7;
    67.     text-decoration: none;
    68.     font-weight: normal;
    69.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    70. }
    71.  
    72. a:hover {
    73.     color: #e8a900;
    74.     text-decoration: underline;
    75.     font-weight: normal;
    76.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    77. }
    78.  
    79. a.titlelink, a.titlelink:visited, a.titlelink:active {
    80.     color: #c7c7c7;
    81.     text-decoration: none;
    82.     font-weight: bold;
    83.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    84. }
    85.  
    86. a.titlelink:hover {
    87.     color: #c7c7c7;
    88.     text-decoration: underline;
    89.     font-weight: bold;
    90.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    91. }
    92.  
    93. a.category, a.category:visited, a.category:active {
    94.     color: #c7c7c7;
    95.     text-decoration: none;
    96.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    97. }
    98.  
    99. a.category:hover {
    100.     color: #000000;
    101.     text-decoration: underline;
    102.     cursor: url('http://sebastiansseite.homedns.org/Hand.png'), auto;
    103. }
    104.  
    105. option, textarea, input, select, file {  
    106.     font-family: Verdana, Arial, Helvetica, sans-serif;
    107.     font-size: 10px;
    108.     color: #000000;
    109.     background-color: #FFFFFF;
    110.     border: 1px solid #333333;
    111. }
    112.  
    113. .footer {color: #FFFFFF
    114.       size: 10px
    115.             }
    116.            
    117. .form_off {  
    118.     color: #666666;
    119.     background-color: #DCDCDC;
    120.     border: 1px solid #666666;
    121. }
    122.  
    123. .form_on {  
    124.     color: #000000;
    125.     background-color: #EEEEEE;
    126.     border: 1px solid #000000;
    127. }
    128.  
    129. .form_username {
    130.     background-color: #eeeeee;
    131.     border: 1px solid #333333;
    132.     background-image: url(images/username.gif);
    133.     background-repeat: no-repeat;
    134.     background-position: left top;
    135. }
    136.  
    137. .form_password {
    138.     background-color: #eeeeee;
    139.     border: 1px solid #333333;
    140.     background-image: url(images/password.gif);
    141.     background-repeat: no-repeat;
    142.     background-position: left top;
    143. }
    144.  
    145. .form_name {
    146.     background-color: #eeeeee;
    147.     border: 1px solid #333333;
    148.     background-image: url(images/name.gif);
    149.     background-repeat: no-repeat;
    150.     background-position: left top;
    151. }
    152.  
    153. .form_text {
    154.     background-color: #eeeeee;
    155.     border: 1px solid #333333;
    156.     background-image: url(images/message.gif);
    157.     background-repeat: no-repeat;
    158.     background-position: left top;
    159. }
    160.  
    161. .input {
    162.     background-color: transparent;
    163.     border: 1px none;
    164.     margin-top: 0px;
    165.     margin-bottom: 0px;
    166. }
    167.  
    Die URL werd ich noch ersetzen,
    sobald mein FTP Client mal wieder funktionieren will :hmpf:

    Aber stimmt das erstmal?
     
    Zuletzt bearbeitet: 09.01.2008
    #9      
  10. Flegma

    Flegma Nicht mehr ganz neu hier

    Dabei seit:
    22.04.2007
    Beiträge:
    164
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    C4D; Netbeans; PS CS5; Gimp
    Cursor + Hover
    AW: Cursor + Hover

    OK,

    So wie ich das jetzt sehe stimmt das erstmal. Aber bist du dir sicher, dass die Bilddatein wirklich so heißen? Denn das waren nur Beispiele xD.

    Naja ok dann sieh ma zu, dass du den wieder zum laufen bekommst denn ohne is doof. Wenns nicht geht nimmste den Explorer.
     
    #10      
  11. n0nam3

    n0nam3 Aktives Mitglied

    1
    Dabei seit:
    30.05.2006
    Beiträge:
    1.079
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop & Illustrator CS5
    Kameratyp:
    Canon EOS 350D
    Cursor + Hover
    AW: Cursor + Hover

    Nunja...ich teste ma

    *FTP-Client ausm Fenster schmeiß*
     
    #11      
  12. Flegma

    Flegma Nicht mehr ganz neu hier

    Dabei seit:
    22.04.2007
    Beiträge:
    164
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    C4D; Netbeans; PS CS5; Gimp
    Cursor + Hover
    AW: Cursor + Hover

    Welchen client haste?
     
    #12      
  13. n0nam3

    n0nam3 Aktives Mitglied

    1
    Dabei seit:
    30.05.2006
    Beiträge:
    1.079
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    Photoshop & Illustrator CS5
    Kameratyp:
    Canon EOS 350D
    Cursor + Hover
    AW: Cursor + Hover

    SmartFTP,
    nur der sacht mir dauernd, die Version wäre veraltet,
    obwohl ich gerade eben die neueste Version runtergeladen...
     
    #13      
  14. Flegma

    Flegma Nicht mehr ganz neu hier

    Dabei seit:
    22.04.2007
    Beiträge:
    164
    Geschlecht:
    männlich
    Ort:
    Berlin
    Software:
    C4D; Netbeans; PS CS5; Gimp
    Cursor + Hover
    AW: Cursor + Hover

    AH ok den hab ich auch, komisch...

    na dann versuch doch mal folgendes:

    - geh ma auf den Arbeitsplatz
    - Netzwerkumgebung
    - Netzwerkressource hinzufügen

    und dann dem ganzen folgen

    auch eine Art, aber nicht mit SmartFTP zu vergleichen.
     
    #14      
x
×
×