I found some information about the rollover images in your forum but nothing close about my client website. I’m working on the homepage where two rollovers must be placed.

The first rollover is a circular photo, the hover should show a text over the picture and have a link to an inner page. I think this is very simple but I’m a little lost with the options.
See my picture here.

Maybe something like Minna did is OK for me -but I don’t know how she did this- I read all her thread but I didn’t understood 🙁

The second rollover is a kind of button. The rollover change the color of the button AND shows the logos bellow. This is more complicated for me and I hope there is solution to do that.
Please see my picture here.

Thanks a lot for your help !
And this is my work in progress 🙂
http://awaodoriparis.com/fr/

Thank you for writing in! And thanks a lot for your kind words 🙂

#1: Upon checking it seems you were able to achieve the first rollover by yourself (see: http://screencast.com/t/imVxIOjRX). Great to see that 🙂

#2: This functionality is called Tabs. We have a detailed video walkthrough on tabs shortcode: http://theme.co/x/member/kb/shortcode-walkthrough-tabs/ that I’d advise to please watch. It covers everything about tabs.

Hope this helps. 🙂

Thank you.

The first part works and is the one you gave to Minna

jQuery('img[src="http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_lorigine.png"]') /*Target*/
    .hover( function(){

jQuery(this).attr('src','http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_lorigine_hover.png'); /*Alternate*/
    }, function(){

jQuery(this).attr('src','http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_lorigine.png'); /*Original*/
    });

And this is the part that doesn’t works… if you have an idea

jQuery(this)$.preloadImages = function() { for (var i = 0; i < arguments.length; i++) { $("<img />").attr("src", arguments[i]); } } $.preloadImages("http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_ladanse_hover1.png","http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_aujourdhui_hover.png","http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_lorigine_hover.png","http://awaodoriparis.com/fr/wp-content/uploads/sites/4/2014/08/1_lenvol_hover.png")});

THANKS for the TABS, I’ll check this 🙂
Raul

Great to hear that the first part worked for you! 🙂

Regarding the second jQuery code, It sounds like you might be having an issue with a third party script. Regretfully, we cannot provide support for third party scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

I have created a set of six icons that display the services we provide, see link below(branding, print…etc.):

Right Angle Creative Branding & Marketing Design

I would like to have it so that the images reverse out in colour, e.g. for branding, the eye to be white and the background to be black. Is this possible to change for each of the six icons?

Thank you very much in advance for your excellent help as always.

Upon checking on your set-up, I can see you are using an image for those icon,

if you can use the standard X icons -> http://theme.co/x/demo/integrity/1/shortcodes/icons/ it would be easy to swap the effect on hover,

If you want to stick with using an image, you need to set-up to have two different version each image, and you need to have custom development, it is only possible if you assign the image as background instead of adding the image your img tag and change the background position or background source on hover. http://css-tricks.com/snippets/css/basic-link-rollover-as-css-sprite/

I would like to stick to using the images I currently have but I’m not quite sure on what to do to achieve this. I am aware I will need to create a second image with reversed colours that will replace the original image on hover but I am not sure what to do from then on?

Is there custom development that I can add to a framework file so that it will globally add these as rollovers for the six services icons?

Many thanks for your help.

Yes, it could be possible with custom development, but regretfully this would be outside the scope of support we can offer. You may wish to consult a developer, or a service like WerkPress or Elto to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Thanks for understanding. Take care!