Secondary graphic image

[confidero]

Hey everyone,

I am currently working on a website and my customer wants to use custom (graphic) icons.

I am able to select a graphic as PRIMARY GRAPHIC IMAGE (for example at the Search Dropdown from Header builder). But i would also need a SECONDARY GRAPHIC IMAGE (Hover and currently active) - but this options seems not to be there (only for icons not for graphics). Do you have a solution for that maybe?

[Alaa]

Hi @ammes90

Currently, there is no option to do that, alternatively, you can just add a custom CSS class to the toggle:

Then add this JS snippet to (Theme Options > JS):

jQuery('.custom_class .x-graphic-primary img').hover(function(){
     jQuery(this).attr('src', 'hover_image');
});

Change hover_image in the code above to the image you want to display on hover.

Thanks.

[Nashish]

Would this work if I want to use different images on different icons? Like if I have 4 different icons and i want a different secondary image for each one. Thanks!

[christopher]

Hi Onaje,

Yes, it will work, but for each case you need to add a separate Class name and separate code. So your class names will be:

custom_class1
custom_class2
custom_class3
custom_class4

and your code will be:

jQuery('.custom_class1 .x-graphic-primary img').hover(function(){
     jQuery(this).attr('src', 'URL OF IMAGE 1');
});
jQuery('.custom_class2 .x-graphic-primary img').hover(function(){
     jQuery(this).attr('src', 'URL OF IMAGE 2');
});
jQuery('.custom_class3 .x-graphic-primary img').hover(function(){
     jQuery(this).attr('src', 'URL OF IMAGE 3');
});
jQuery('.custom_class4 .x-graphic-primary img').hover(function(){
     jQuery(this).attr('src', 'URL OF IMAGE 4');
});

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

[confidero]

Hey Themeco-Team,

the code works fine.

Just one “problem”: the hover effect is there, but when the cursor is not at the icon anymore the hover-effect is still there:

see here:

[Alaa]

Hi @ammes90

You are right, the code must be modified to be like this:

jQuery('.custom_class .x-graphic-primary img').hover(

function(){
     jQuery(this).attr('src', 'hover_image');
}
,

function(){
     jQuery(this).attr('src', 'original_image');
}

);

Change hover_image and original_image in the code above to your images links.

Reference: https://api.jquery.com/hover/

Thanks.