Solved (quite) Go to url with added class to the anchor

Hi to all,

I’m trying to add a custom class to a “go to URL” action attached to an image.

For example, if I select the image and I fill the go to URL field in the Action Setting panel (for example https://www.google.com) is there a way to have, in the exported code, a link like:

a class=“myCustomClass” href=“https://www.google.com” ?

How can I add a css class to the URL? Is it possible?

Thanks in advance

By using class I believe you want to add CSS to it later (or use it in JavaScript). There’s an option to add class name to an element in the last tab (I don’t really know the name :sweat_smile:) - next to the actions tab.

1 Like

I’ve tried to add the class in the Identity tab but nothing works

I think that “class” is a css class for the item itself and not for the anchor.

In other words, I think that the code could be

img class=“theClassInTheIdentityTab” src=“urlToImage”

but I need

a class=“myCustomClass” href=“urlToSomewhere”
img src=“urlToImage”
/a

You might want to edit the InnerHTML then. Select the image > Edit (from menu) > Edit InnerHTML. I have not tried this for images, but, my guess would be, you’d have to remove the image that you’ve imported from the scene > Add a rectangle > Edit its Inner HTML >

1 Like

I can understand but it’s a little bit complicated, that’s why I need to pass an anchor with a class parameter.

The image is on the scene and there are some animation when the mouse rolls over. There are a lot of images with graphics effects and I need to get some data from a database when the image is clicked and put that information into a popup.

It’s awful that there isn’t a way to customize an anchor adding tag parameters…

If you want mouseover effects, etc., I guess, there’s no real way to add class name to links. However, what I can suggest is, you can probably add an element above the image, keep the opacity 0, add the inner HTML of the link with class to that and add mouse actions also to that (including image effects). So, whenever a user hovers on the image, he/she actually is hovering over the invisible rectangle.

Unfortunately I can’t do that… Looks like the only way is to add a text link into inner HTML because forms act like images… :-/

At the end, the workaround is to add inner HTML with height and width specified in the style tag.
That isn’t a solution I like because images have different forms and dimensions, so I have to code every link by hand and the link itself is squared… But I can’t spend more time on it, the project must be online soon.

I think that a customized anchor could be a feature request.

Hype’s Go to URL action doesn’t strictly use an <a> tag, and instead is based on javascript that gets triggered from the action. In some cases we may produce a transient tag to help with faking the click, but usually it is just a window.top.location = url; type of call.

Can you elaborate on what you are trying to do with the class on this tag?

Thanks Jonathan, I guessed that…

My project is a little bit complexed: on Hype there is a tree with some groups of leaves; every group of leaves shows a little effect onMouseOver and onMouseClick it recalls a popup window that shows a WP post.
The tree is imported into a Wordpress page and the popup is handled by a WP plugIn, with has its own rules: it calls the popup by an anchor with a certain class. That’s why, to make things easier, I needed a customized anchor.

It’s a workaround solution but InnerHTML works quite well… Probably there is a way to recall the popup by a Jquery trick but I really have no time to work on it. The website is a helper / support for people that want to share messages about their situations in Covid times, so I have to put it online asap.

I may have an idea for you but first what is the code you are putting in the innerHTML.
Is this code calling the popup as well or do you still call the popup with the 'go to url ’ Action

Also which plugin are you using.

Hi MarkHunte,

the code is quite simple:

<a style="width: 75px; height: 35px; opacity: 0" class="modal-link" href="/wp/foglia1/"></a>

The Wordpress plugin is: WP Post Popup

In the anchor, the “/wp/foglia1” is the name of the post (so I have foglia1, foglia2 and so on)

“foglia” means “leaf”, there’s a tree with some leaves and every left shows a message (post) in a popup (handled by the WP Post Popup plugin

Another way to use the plugin is to pass the post url by “?modal-link:/wp/foglia1” but it reloads the page and not always works. The better way is to have an anchor with “modal-link” class and actually works in this way.

1 Like