Hyperlink box?

Ask the community
,
1

Hello,

I am currently optimising my site for mobile and have a box with no text in it that sits on top of a slideshow (purely for aesthetic purposes). I was wondering whether it is possible to make this box a hyperlink to go to another page when clicked? I can see in developer mode that there’s scope for an ‘On Click’ event, but what code might I use to make this work?

Any help would be greatly appreciated.

Many thanks,

Thomas

2

You have 2 options:

  1. if the box is just a place holder and doesn’t serve as a container to other elements, you can remove it and put a button instead. You can resize and redesign the button to look exactly like the box.
    In this case no code is needed as you can link the button thorough the editor.
  2. you can use the box and the following code:
    For external webpage:
import wixLocation from 'wix-location';
$w.onReady(function () {
    $w("#box19").onClick( (event) => {
        wixLocation.to("https://en.wikipedia.org");
    })

});

For internal webpage:

import wixLocation from 'wix-location';
$w.onReady(function () {
    $w("#box19").onClick( (event) => {
        wixLocation.to("/home");
    })

});
3

Thanks very much for this, I will test drive it! Just quickly, if I replace it with a button, will it require text? Only the look I am trying to achieve is a hollow/transparent box with a thin border.

Thanks again!

4

@info81994 you can remove the text from the button if you wish.
(But if you want this area to hold contents (such as images, shapes, long texts etc.) then box will be better).

5

Fantastic - I went with the button in the end, but the code for hyperlinks on shapes is incredibly useful to, thank you very much!

6

How would the code look if we had more of these buttons on the page? It shows an error code for me when I try the code “wixlocation, has already been declared”.

7

The import line should appear one time only (at the top of the code).
It’s also better to have 1 $w.onReady(function () { /rest of the code/ } per page and put the rest of the code inside.

8

What could I do if I want to open this new link in a new window?

9

This works!! and, what if I want to open the link in a new tab?

10

Hey J.D the code works great on one item but how can i hyperlink multipul boxs on one page? TIA

11

Hey, this thread is too old.
Please open a new thread and explain what you’re trying to do in details (+ explain what a multiple box is). Thanks.