✔ Mauszeiger ändern über CSS-Klasse

[fhr]

Hi,

ich würde gerne über bestimmten Tabellenspalten einen eigenen Mauszeiger einblenden.

Dies funktioniert auch mit

style="cursor:url(images/popup.cur), auto;"

im IE sowie im FF!

Nur habe ich mehrere Stellen, an der ich diese Textzeile einbauen müsste.
Deswegen ist es mir wichtig, dies in meine css-datei auszulagern und die Eigenschaft dann als Klasse zu definieren, falls sich z.B. der Name der Datei mal ändern sollte etc....

Hier, liegt auch schon das Problem... der Firefox streikt sobald ich diesen Weg gehe!

thx 4 your help!

 

[Maik]

Das sollte eigentlich kein Problem darstellen:

td.cursor {
    cursor:url(images/popup.cur);
}

<table border="1">
  <tr>
    <td class="cursor">...</td>
  </tr>
</table>

 

[fhr]

Aber nicht im Firefox

 

[Maik]

Wie es aussieht, unterstützt u.a. der Firefox-Browser eine Grafik als Cursor nicht:

Netscape, Internet Explorer 5.x, Opera, Mozilla Firefox, Konqueror und Safari 1.2 interpretieren die Angabe url([Datei]) nicht, der Internet Explorer bis Version 5.5 kennt pointer nicht, jedoch den nicht standardisierten Wert hand.


Quelle: SELFHTML: Stylesheets / CSS-Eigenschaften / Anzeigefenster

 

[fhr]

Ausserhalb der css-datei funktioniert es ja...
Ich weiss halt nicht genau, wo das der Unterschied liegt !

 

[Maik]

Stimmt denn in der CSS-Datei auch der Pfad zur Grafik?

 

[fhr]

So, back again...

Das css-File liegt im Ordner Styles. Das Bild im ordner Images.
Die Seite einen Pfad darüber (root).

Deshalb hatte ich in der css-datei als Pfad zuerst ../ vor Images geschrieben.
Da die css-datei aber in der php-seite eingebunden wird, müsste der Pfad "/images/popup.cur" auch stimmen.
(sonst würde es im ie ja net funktionieren)

 

[Maik]

Gibt es eventuell eine Online-Version der Seite, um das Problem mal direkt in Augenschein nehmen zu können?

 

[fhr]

Gibt es eventuell eine Online-Version der Seite, um das Problem mal direkt in Augenschein nehmen zu können?

Sry, das is intern auf der Arbeit.
Das kann ich nicht ohne weiters so ins Netz laden...

Aber bau doch einfach ne stinknormale Tabelle wo du per css-Datei im <td> den Mauscursor änderst. Dürfte ja nicht länger als 5 min. dauern...
Wenn es dann im FF funktioniert, kannst mir ja mal deine Lösung posten.

Schonmal THX für die Hilfe!

 

[Maik]

Hab mir mal die Verzeichnisstruktur mit den entsprechenden Dateien angelegt (css -> test.css, images -> test.cur).

Beim Referenzieren der Grafik in der CSS-Datei hat sich dann herausgestellt, daß es im Firefox nur mit ../images/test.cur läuft.

Wenn man das ganze dann auf einen Webserver legt, funktioniert es im IE plötzlich nur noch mit ./images/test.cur.

Daraus habe ich dann folgende Lösung hergeleitet und erfolgreich getestet:

td.cursor {
        cursor:url(../images/test.cur), auto !important; /* Für FF */
        cursor:url(./images/test.cur), auto; /* Für IE */
}

Testumgebung: Win2k, XAMPP 1.5.1, Firefox 1.5.0.4, IE 6.0