Make a box clickable, or a background image in a box clickable


#1

hello! my landing page is not live so nothing to test. I’ve found the best way to get hi res images to appear nicely on mobile is to make a Box element and set the image as the background image as the box. however in some cases I also want that image to link out somewhere.

how can i achieve this? can i add a link to the box, or to the image, or some variation?


#2

The way i have done this in the past (really crude) - put a button over the image, full opacity, remove text (make button invisible).

There may be a better way…


#3

Another thought - i wonder if you could get the same effect (high res images) by setting as a background image of a button (use a button in place of box) - should / might work!?


#4

@sgro28 although the “box method” works well I’m still a fan of 2x png retna style. This works really well. Basically I make sure all my images re png’s and a minimum of 2x larger than they need to be. Then I scale them down when I put them on my page.

As for linking a box, I’m pretty sure it can be done in JS. Do any @Unbounce-Experts know a way?


#5

I would suggest the same as @Alex_Scovell :grinning: Straight forward and easy.


#6

@Alex_Scovell hi all! i am trying to do this and it won’t scale the image into the button size, i can’t uncheck “fit button size to image”. one time i got that box to uncheck and the image stayed in place instead of scaling to the button size…any ideas there?


#7

ahh yes - just tried it - doesn’t work!

so go with the other option - put image in box. put button on top of box and set background to solid colour, opacity 0, inner highlight off, border none and delete the text - so it becomes invisible.

place over your image and obviously make sure it is in front not behind the box image.


#8

@digibomb how do you scale down? this is what the box effectively does - is there another way?


#9

The button trick works.

However, If you want to do it through JS and a bit of CSS, you can see a working example here and grab the necessary scripts here.

My JS/CSS example saves you the trouble of setting a button over the box but you need to adjust the JS so it’s really a matter of personal preference.

Best,
Hristian


#10

Hi, do you mean overlaying a button onto a box?

when trying to set an image as the background of the box, there are problems with the image scaling properly.


#11

@Alex_Scovell Scaling down is not an issue. The image is already 2x bigger. So when you make the image smaller the pixel count is still there. I have never had an issue with this method.