Saját egérmutató (CSS)

Ajaxos alkalmazásoknál gyakran használok más egérmutatókat, mert sokszor egyértelműsítik mit lehet egy objektummal csinálni. Például drag n’ drop-olható elemeknél ezt a kurzort használom:

CSS-ben ilyet elvileg nagyon egyszerűen definiálhatunk:

body{
cursor: move;
}

Firefox alatt szépen meg is jelenik a kezecske, de az Internet Explorer 6,7 és a Safari is egy nyilaskeresztet produkál helyette.. Ez nem ébreszti fel usereinkben a “dragndrop” ösztönt (izraelita usereink pedig ijedtükben kikapcsolják a böngészőt ). A célunk az, hogy minden böngésző alatt a kezecske jelenjen meg.

Szükségünk lesz a megfelelő cursor bitmapre: openhand.cur

Másoljuk a css-el egyező mappába és írjuk át a css kódot:

body{
url(openhand.cur),move;
}

Lám, lám Safari barátunk szépen működik, a jó öreg IE pedig még mindig nem boldogul vele.. Hogy miért nem? Mert egy nagy rakás sz*r és nem képes követni a W3C szabványokat.. A trükk a következő:

Adjuk meg az abszolút hivatkozást is:

body{
url(openhand.cur),url(layout/openhand.cur),move;
}

Papaam és már megy is Firefox, Safari, Internet Explorer 6 és 7 alatt is!