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:
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 ) - next to the actions tab.
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 >
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.
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?
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
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.