[OpenLayers-Users] Another Cursored Question

[Andreas Hocevar]

Hey Bill-

On Thu, Jul 2, 2009 at 9:08 PM, Bill Thoen<bthoen at gisnet.com> wrote:
> I noticed in Bart's explanation on how to use the new cursor features in
> 2.8, that there are CSS styles that appear to use two *.cur files, which
> implies that we can use multiple cursors for different stages in a mouse
> operation, but also that we can use _custom_ cursors (beyond the small
> standard set you get in JavaScript). Here's an example of what I mean:
>
> .olControlZoomBoxActive {
>    cursor: url(lib/openlayers/theme/default/img/zoomin.cur) 9 9,
> url(../geoservices2.2/lib/openlayers/theme/default/img/zoomin.cur),
> auto;
> }
>

This has nothing to do with multiple stages in a mouse operation. CSS
cursor definitions allow to specify multiple urls. If one fails to
load or is invalid, the next is used. At the end of the list, there
always has to be a system cursor. The hotspot coordinates are usually
not required, because .cur files provide that information. Also, I
think these coordinates only work in CSS3 capable browsers, and these
can also handle gif files. For further reading, I recommend
http://www.w3schools.com/CSS/pr_class_cursor.asp and
https://developer.mozilla.org/En/Using_URL_values_for_the_cursor_property

> The zoom box tool has two cursor states (moving and dragging) so it
> makes sense that you would need to be able to specify two cursor images.

You can do that already. It requires no coding, just CSS. The best
thing to get started is to search theme/default/style.css for the term
"cursor". And you have to know that every control sets a css class on
the map viewport div, which is always

control.displayClass + "Active".

For control.displayClass, if not provided, the default value is

control.CLASS_NAME.replace("OpenLayers.", "ol").replace(/\./g, "");

In the case of the ZoomBox control, the cursor that appears when
dragging a box comes from Handler.Box and can be set using the CSS
class selector .olDrawBox. The cursor for moving the mouse comes from
Control.ZoomBox and is set using .olControlZoomBoxActive.

> I'm guessing that the two urls here are doing just that. The 9 9
> coordinates are the hotspot on the first cursor I suppose too.

You are right about the hotspot, but not about the two urls. See above.

> Unfortunately, the new OpenLayers doesn't include any *.cur files in the
> distribution, despite what it looks like here.

The default theme only uses cursors built into the browser. But as
pointed out above, you can change that easily.

> But I'd like to learn a bit more about OpenLayers cursors. Like, for
> instance, are those .CUR cursor files cross-browser compatible? Are
> there any public examples of maps that use the new cursor features yet?

Again, new in OpenLayers is only the handling of cursors with CSS
selectors instead of hard-coded cursor styles. The rest is CSS, and
CSS references on the web should also list which browsers they work
in. As far as I know, they work in all browsers except Safari, and in
Internet Explorer they have to be specified in a different way.

> Is there any documentation, technical specs or examples on using cursors
> available to the public or does the code speak for itself (as is so
> often the case). I've searched the web site and wiki, but haven't found
> anything on this topic yet. So before I go spelunking around in the
> source code, I'm hoping someone can point me to what I'm looking for.

See above. Plenty of CSS documentation is available on the web, and on
the OpenLayers side volunteers willing to write a tutorial are welcome
:-).

Regards,
Andreas.

-- 
Andreas Hocevar
OpenGeo - http://opengeo.org/
Expert service straight from the developers.