Programming + Design

Tweaking the Highslide JS mouse pointer PDF Print E-mail
Written by Brett Brewer   
Tuesday, 26 February 2008

I ran across a slight problem recently when I wanted to change the default magnifying glass cursor used by the AMAZING Highslide JS javascript library . If you need zooming thumbnails or any other kind of popup-window based content, the Highslide JS library is your cross-browser compatible popup saviour.  The library uses both javascript and CSS to define custom cursors for when you have your mouse over a zoomable image. I was scratching my head wondering where to change the cursor so that I could use the htmlExpander feature with a graphic button on some parts of my site while still being able to use the default magnifying glass cursor for all other images. This turned out to be a no brainer after I realized I just needed to override the cursor property using an inline style on any element that I want to use an alternate cursor on. In my case, to get the normal hand pointer that normally appears on links to show up, simply add an inline style to your button such as 

<img src="/graphics/some_button_image.gif" style="cursor:pointer;" /> 

I don't know why the hand cursor is called "pointer" in CSS, but it is. Seems to me they should call the standard arrow cursor "pointer" and call the hand cursor "hand". Anyway, I know this seems trivial, but the HighSlide JS web site does not mention how to do this, so I thought I'd share it here. 

Last Updated ( Tuesday, 26 February 2008 )
< Prev   Next >


Who's Online

We have 1 guest online

© 2017
Joomla! is Free Software released under the GNU/GPL License.