invert hover state

[dynamyc]

I have a set of thumbnails images, now when the image is hovered some text will appear, so what I want to do is invert this behavior, to display the hovered text by default and when the text is hovered to display the image.

The markup for the thumbnails images is generated by some jquery functions and this is what confuses me.

Here is the code:

var fg_divthumbimg = $(this).parent().parent().parent();

fg_divthumbimg.css({'display':'block'});



var fg_divthumvsecdiv = $("
").addClass("hoverbgpfthnailmiddle").css({'float':'left', 'line-height':'0', 'background-color':''}).append($(this)); //fg_divthumbimgi

var fg_divhoverbg = $("
").addClass("hoverbgpfthnail").css({"background-color" : (srcobj.color)?srcobj.color:"#008eeb" }).append(fg_divthumvsecdiv);

var fg_divhoverbgmetadata = $("
").addClass("hoverbgpfthnailmetadata").html(''+srcobj.thumb_title+''+srcobj.thumb_cats+'+');//.append(fg_divthumvsecdiv);

var fg_divthumbimg = $("
").attr("class","imgcontainer").attr('rel', srcobj.rel).css({'display':'block', 'visibility':'visible', 'width':'0', 'overflow':'hidden'}).append(fg_divhoverbg);

fg_divthumbimg.append(fg_divhoverbgmetadata);



var fg_divhoverbghover = $("
").addClass("hoverbgpfthnailiface").hover(function(e){

g_hover_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);

e.stopPropagation();

},function(e){

g_hoverout_thumbnailsaltimg.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);

e.stopPropagation();

}).click(function(){

fg_imgpreview.apply($(this).parent().children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"));

});

if(jQuery.browser.msie){

fg_divthumbimg.click(function(){

fg_imgpreview.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"));

}).hover(function(e){

g_hover_thumbnailsaltimg.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);

e.stopPropagation();

},function(e){

g_hoverout_thumbnailsaltimg.apply($(this).children(".hoverbgpfthnail").children(".hoverbgpfthnailmiddle").children(".pf_img"), [e]);

e.stopPropagation();

});

fg_divhoverbghover.unbind('click').unbind('hover');

}



fg_divthumbimg.append(fg_divhoverbghover);

//fg_divthumvsecdiv.append(fg_divhoverbgmetadata);

$(".imgscontainer").append(fg_divthumbimg);





//var fg_thumbimgpr = $(this).parent().parent(".imgcontainer");

var fg_thumbimgpr = fg_divthumbimg;

$(this).css({width: newimagewidth+'px'});

fg_thumbimgpr.css({'visibility':'visible', width: newimagewidth+'px'});

if(!navigator.userAgent.toLowerCase().match(/(iphone|ipod|ipad)/)){

$(this).css({'opacity':0}).animate({'opacity':1}, 400);

}



};

And this is the generated html code for a thumbnail:

   












Fiesta del AguaJULY+

You can see a live version here: Could you give me some suggestions, tips on how I can change this ?

[Mottie]

Hi dynamyc!

While I do enjoy challenges, that code is just too much of a mess to have to deal with… there are also missing functions like fg_imgpreview that aren’t shown in the code.

Have you considered just using a tooltip to display the image?

[dynamyc]

Not really, what approach do you have for using a tooltip to display the image ?

[Author]

Posts