Make background image clickable

Support
#1

Hi!
I´m working on a page: http://www.showdevida.no There’s a row of column images with two background images and then a row with three images. Is there a way to make these images or columns clickable to go to subpages etc?

Any alternative suggestions is greatly appreciated also.

#2

Hello @annekling,

Thanks for writing in! :slight_smile:

You can do this by adding the script below in your X > Launch > Options > JS.

jQuery(document).ready(function($){
	$(".el36 .el38 .x-bg").wrap('<a href="http://google.com/"></a>'); // column 01/section 01
	$(".el36 .el42 .x-bg").wrap('<a href="http://google.com/"></a>'); // column 01/section 02
	$(".el49 .el51 .x-bg").wrap('<a href="http://google.com/"></a>'); // column 02/section 01
	$(".el55 .el55 .x-bg").wrap('<a href="http://google.com/"></a>'); // column 02/section 02
    $(".el55 .el58 .x-bg").wrap('<a href="http://google.com/"></a>'); // column 02/section 03
});

Then change the http://google.com links to your subpages.

Hope it helps.

1 Like
#3

Hi!
I added this:

jQuery(document).ready(function($){
$(".el36 .el38 .x-bg").wrap(’’); // column 01/section 01
$(".el36 .el42 .x-bg").wrap(’’); // column 01/section 02
$(".el49 .el51 .x-bg").wrap(’’); // column 02/section 01
$(".el55 .el55 .x-bg").wrap(’’); // column 02/section 02
$(".el55 .el58 .x-bg").wrap(’’); // column 02/section 03
});

It doesn’t work. None of them.

#4

the post removed my links for some reason I added this to global js, and I have the pro theme:

jQuery(document).ready(function($){
$(".el36 .el38 .x-bg").wrap(’’); // column 01/section 01
$(".el36 .el42 .x-bg").wrap(’’); // column 01/section 02
$(".el49 .el51 .x-bg").wrap(’’); // column 02/section 01
$(".el55 .el55 .x-bg").wrap(’’); // column 02/section 02
$(".el55 .el58 .x-bg").wrap(’’); // column 02/section 03
});

why is the posts removing my links? Here´s a screenshot of what I added

#5

Hi There,

Let’s have a different approach, please add a unique ID for each of your columns so we can easily target them.

Use this ID on the respective columns (morro, event, fest, anledninger, musikk)

Then add this on the Page JS

jQuery( document ).ready(function($) {
	$('#morro').on('click touched', function() {
		window.location.href = 'LINK URL HERE'; });
	$('#event').on('click touched', function() {
		window.location.href = 'LINK URL HERE'; });
	$('#fest').on('click touched', function() {
		window.location.href = 'LINK URL HERE'; });
	$('#anledninger').on('click touched', function() {
		window.location.href = 'LINK URL HERE'; });
	$('#musikk').on('click touched', function() {
		window.location.href = 'LINK URL HERE'; });
});

Replace all the instances of LINK URL HERE, to where you want to link those respective columns.
Make sure you don’t accidentally remove even one quote on this code, else this not going to work.

Then add this to Page CSS

#morro,
#event,
#fest,
#anledninger,
#musikk {
	cursor: pointer;
}

This will give you the pointer cursor when you hover over on the columns, giving your viewers a hint that these columns are linked/clickable.

Hope it helps,
Cheers!

1 Like
Making background images clickable
Add a link into a column
3 columns each their own link to a different page
3 columns each their own link to a different page
#6

Worked perfectly! Thank you!

#7

You’re welcome.

#8

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.