kandrews
Posts: 5
Joined: Wed Jun 02, 2010 1:35 pm

Custom mouseover icon over thumbnail

Hello,

I was hoping someone could point me in the right direction. I am using the Highslide JS code on my webside and was wondering if it was at all possible to display a custom mouse icon when someone hovered over a thumbnail that was linked to an image/video set on my webpage. An example would be if someone were to move their mouse over a thumbnail image that I was using as a placeholder for a video and the mouse pointer would turn into a video icon like a videocamera, instead of the default magnifying glass. I was hoping to be able to achieve this level of customization so the web visitor would be able to differentiate between video sets and image sets when viewed in the same gallery. Thanks in advance!
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Custom mouseover icon over thumbnail

Hi,

You can do this with CSS and a custom .cur file.

Example
Add an additional class name to the anchor:

Code: Select all

<a href="../images/full-image.jpg" class="highslide video" onclick="return hs.expand(this)">
	<img src="../images/thumbnail.jpg" alt="Highslide JS"
		title="Click to enlarge" height="120" width="107" /></a>
Add the CSS rule AFTER the opening body tag <body>

Code: Select all

<style type="text/css">
.video img {cursor: url(path/to/your-custom.cur), pointer !important;}
</style>
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
kandrews
Posts: 5
Joined: Wed Jun 02, 2010 1:35 pm

Re: Custom mouseover icon over thumbnail

Awesome! Thanks for the quick reply. Glad to see this level of customization is attainable.
Loko
Posts: 2
Joined: Thu Sep 11, 2014 12:36 pm

Re: Custom mouseover icon over thumbnail

Hi there

Sorry for getting this old thread up, but I face the same need, and RoadRash's tip does not work for me.

Here is my link :

Code: Select all

<a class="highslide highslide_monlien" onclick="return hs.htmlExpand(this, { objectType: 'ajax', width: '500', headingText:'Pièces jointes - demande n°461'} )" href="...">
<img width="16px" height="16px" style="border:none" src="....png">
</a>
and my css code in the body section :

Code: Select all

.highslide_monlien img {
	cursor: hand, pointer !important;
}
I even tried to define cursor in the style section of my link, had no effect. I still see the zoomin.cur that is defined in highslide.css and can't get to override it.

In firebug, my own class is strangely empty :
Image

Loko
User avatar
RoadRash
Posts: 8249
Joined: Tue Jul 15, 2008 6:43 pm
Location: Fredrikstad, Norway
Contact: Website

Re: Custom mouseover icon over thumbnail

Hi Loko,

The script has changed since this thread was created.

Add this code to the Highslide settings to remove the Highslide zoomin cursor:

Code: Select all

hs.expandCursor = null;
Hilde
Highslide Support Team

Overview of my Highslide sample pages: RoadRash.no
Loko
Posts: 2
Joined: Thu Sep 11, 2014 12:36 pm

Re: Custom mouseover icon over thumbnail

ok, thank you RoadRash

Return to “Highslide JS Usage”