Hans Spieß

Custom Cursors mit Css

Wieder was gelernt… aber mit einigen Umwegen. Die Aufgabe: bestimmte Navigationselemente einer Seite sollen einen custom Cursor erhalten. Die 3 gesammelten Erkenntnisse hierzu:

Cursor für IE, Firefox und andere

Alles nicht so einfach, wie man sich so oft wünschen würde, schreibt Adrian Ber:

cursor: url(cursor.cur),url(cursor/cursor.cur),default;

So everytime you want to define a crossbrowser CSS cursor you should define it as a list containing the url relative to the source element, the url relative to the style sheet and the default value.

Wie erstelle ich .cur Files?

Nach etwas Herumsuchen fand ich Artcursors (Windows). Mehr brauchte ich für den Moment nicht.

Warum zickt der IE immer noch? 

In Gecko (Firefox) the limit of the cursor size is 128×128px. Larger cursor images are ignored. However, you should limit yourself to the size 32×32 for maximum compatibility with operating systems and platforms.

Das war denn auch des Rätsels Lösung: mein Cursor war größer als 32x32px.
Danke für die Info, Mozilla!

Kein Css, kein Javascript, oder eines fehlt… was tun?

Auch im Rahmen dieses Projektes habe ich mich gefragt, wie man eine Fehlermeldung bauen kann, die sowohl erscheint, wenn der Benutzer Javascript ausgeschaltet hat, als auch, wenn sein Browser kein Css kennt, als auch, wenn beides der Fall ist. Meine Lösung mit jQuery setzt sich aus drei Teilen zusammen.

Hinter dem Body-Tag:

<div id="nocssnojs">
    Der dirty Hinweis, daß gerade nix geht...
</div>

<script type="text/javascript">
    $('div#nocssnojs').addClass('nocssnojs');
</script>

Und irgendwo im Stylesheet:

.nocssnojs { display: none; }

Funktion zum Maskieren von E-Mail-Adressen

Nachdem ich nach 30 Minuten googeln nichts Vernünftiges fand, habe ich mich mal wieder lernend mit Php beschäftigt und diese kleine Funktion gebaut:

function mailreplace($str) {
    return preg_replace_callback ('^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})^',
        create_function (
            '$str',
            'for ($i = 0; $i < strlen($str[0]); $i++) {
                $result .= "&#" . ord(substr($str[0], $i, 1)) . ";";
            };
            return $result;'
        ), 
    $str);
}

Wie man sieht, sucht die Funktion in einem String nach E-Mail-Adressen und ersetzt deren Zeichen durch ihre ASCII-Entsprechungen. Einzige Unklarheit war, daß der Suchtreffer der temporären Funktion als Array übergeben wird, dessen erstes Element die Mail-Adresse beinhaltet. Warum der Treffer nicht als String übergeben wird – keine Ahnung.