Rollover on icons

me wants this too ;)

subscribing...

Quick note (no answer):

When you assign an issue to yourself it means that YOU are working on a solution.

Personally, I'd simply suggest using an icon set with two-images-in-one, and using CSS to flip which part of the image is shown when hovering. This CSS technique is detailed in various guides and such around the net, but I can't remember where exactly.

@Freso: I am pretty sure that people with expert css knowledge might already have found a solution for this in their websites. The thing is though, that the rest of us might find it hard to implement such a thing. How about instead of 'fixed' and 'support request' we leave this to 'feature request' and 'postponed' + also set it to 'minor'?

This will serve as a to-do list for once you find some time to bother yourself with this (or if in the meantime someone else comes up with a patch).

I promise I will look into this and post information on what needs to be done in css code. I will also convert all flag icon pngs to two-in-one and upload them here for you to include them. All you'll need to do is to simply add an option (yet another one) to the module's settings in order to enable this feature or not.

btw, once language icon themes is implemented, we can have two possible types of icon sets... one simple/'always on' set with only custom country flag icons and one 'on/off' type that offers two-in-one icons.

What say you?

Found it: http://css-tricks.com/css-sprites/

I am looking into this and converting the flag icons.

PS: Freso, sorry for not waiting for your answer first ;)

Another helpful url: http://wellstyled.com/css-nopreload-rollovers.html

It explains that using sprites to achieve the rollover effect is (or rather feels) much faster than using two images. This is because if you use two images, then after loading the page and once the mouse is over the 'off' image, the 'on' image needs to load and that takes a second or two.

By using a single sprite image, both states (on & off) are already loaded once the page finishes rendering. You simply use css magic to display the part of the sprite you want, depending on mouse position.

I am also uploading a test set of icons that were converted to sprites:

- canvas size (width) x 200%
- copy-paste of icon on the right, next to self
- increased brightness of right icon by 50%

The only issue I foresee is that not all flag icons have the same width. This will make it hard to code a generic css that calculates the pixel position where you traverse (is this that right verb to use?) from one image to the other. This is because to achieve the effect you use code similar to:

background-position: -157px 0;

That is based upon the exact dimensions of the image. Unless of course something like this is possible:

background-position: 50% 0;

... or something. I really don't know. I will take a look at the code and try to figure how icons are loaded and displayed and see if I can hack my way through this.

Just asking... I know some nations' flags are square while others' are rectangular, but could we find a way to have the same size for all? This would solve the issue I mention above.

...just hit me! So, I am answering my own question above concerning same size (dimensions) of all flag icons.

I believe I can add the extra pixels in smaller icons (be it in width or height) and make these pixels transparent. That would do it. How didn't I think of it in the first place. There...

@klonos: Are you alright with this being a "fixed" "support request" now? :) Also, if you would like to write a tutorial on how to implement this trick specifically for Language Icons, that would be very awesome and greatly appreciated. I'm sure other people would find this very interesting as well. =)

@Freso: Well, I like to see an issue marked as 'fixed' when the problem is actually solved. I haven't got it to work (as I'm still looking into it)... so, nope I wouldn't call it 'fixed' yet. It's not even close to 'fixed' ;)

I am not trying to implement this to my custom themes or anything. So I don't consider this a 'trick'. I simply want to help get this feature in the module's code (if you approve). I thought since there is plan for supporting icon packs in the future, this feature could fit in there somewhere. Like I said, there could be simple icon packs or ones with a hover effect.

As for the tutorial you mention... hopefully this will come to be a feature of the module and it will end up in the documentation of how to create custom icon packs (with or without a hover effect).

I see you are rushing to mark most of the issues 'fixed' (I'm guessing in order to get them out of your way and move on to adding new features). If it is so, feel free to mark it fixed. But it's not :P

I am going to need some help with the code... how do I know which language is the current one (so its icon can have the 'on' state).

Well, I don't feel any code should be going into the module for this, as long as it is possible to do it with custom icons and a CSS sprite technique. I much prefer to have this module be as light-weight as possible, and this feature simply seems to add cruft to the code, instead of relying on the beauty of CSS to handle such cases.

But the current language can be found if you inspect the global variable $language:
global $language;

Hi, thanks a lot for this explanation,
I've been trying with the image sprite to have a different image on my language icon on hover but it seems to be a problem, because it redimensions my image and shows the hole image, instead of only the right or left part.
For example: I've got a 30*30 icon that I want to show, so I've made a 60*30 image with the normal icon on the left and the hover icon on the right, but on my site I get a 30*30 squeezed version on my 60*30 image.
I am having a little problem understanding how to fix this since my image comes from language icon module, I can't apply "background" elements to my image...
So, I was wondering if you had managed to make multiple icons with sprintes using language icon module?