By BaliuxXx on

Hello,

Searched and tried lots of stuff, but nothing found what I need. I need a simple ImageCache hover trick. If I had two presets, i.e. one in grey and one in color. I want when my mouse over the grey image, it becomes color. Tried Hover_Preview module, but it pops up other image (with other preset). All I need is simple hover :)

Any suggestions?

Thanks,
Donatas

⋅ Categories: Drupal 6.x

Comments

ayesh’s picture

ayesh commented

I think it's better and easy to do with CSS. Loading another image with same size but colors is not a good usage of ImageCache, I think.
and my CSS knowledge is "null"

What's new and changing in PHP 8.4

BaliuxXx’s picture

BaliuxXx commented

thanks for your reply, Ayesh. There is a cool module called imagecache_actions, you can change colors, background and etc. for your image. It's impossible with css, because you don't know wich image to hover. I think I would need to write some js on my own to do this if there isn't yet. And I can't believe it isn't.

Thanks, Donatas

BaliuxXx’s picture

BaliuxXx commented

If somebody needs I wrote simple code for this stuf.
Having two presets named 'imageSmall' and 'imageSmallHover', you can change these images with jquery

$('.imagecache-imageSmall').hover(function(){
		// IN 
		var src = $(this).attr('src').replace("imageSmall", "imageSmallHover");
		$(this).attr('src', src);
	  }, function(){
		// OUT  
		var src = $(this).attr('src').replace("imageSmallHover", "imageSmall");
		$(this).attr('src', src);
	  });
stuhannaford’s picture

stuhannaford commented

Had the same issue myself. Searched around for a dedicated module, didn't really find anything to do the job. Just needed simple greyed out - full colour on hover. My worry with creating to presets was load time as it was designed for a gallery of 12 images, therefore straight away doubling to 24. my client was really fussy on load time. my solution was to:

  1. simply create one full colour imagecache preset
  2. using Firebug addon for firefox, find the exact class for that preset so that it didn't affect all of my images, just these ones.
    the class i ended up with for reference was ".imagecache.imagecache-gallery_thumb.imagecache-default.imagecache-gallery_thumb_default"
  3. added the following code to my style.css to enable black and white as standard, then hover for full colour:
    .imagecache.imagecache-gallery_thumb.imagecache-default.imagecache-gallery_thumb_default{opacity: 0.2; filter:Alpha(opacity=20); transition: opacity 2s;
-moz-transition: opacity 2s; /* Firefox 4 */
-webkit-transition: opacity 2s; /* Safari and Chrome */
-o-transition: opacity 2s; /* Opera */}
.imagecache.imagecache-gallery_thumb.imagecache-default.imagecache-gallery_thumb_default:hover{opacity: 1; filter:Alpha(opacity=100)}
  4. as you'll see, there is a little transition CSS in there too to make the hover change nice and smooth

not absolutely perfect, as it still has some colour in there by definition of just an opacity change, but did the job i was looking for. as a reference, you should be able to see how it works via this link:

http://www.thorneweddingphotography.co.uk/gallery

hope this helps

fransoa’s picture

fransoa commented

Thank a lot for that one !!!
Exactly what I was looking for !