Omeka S rearranges and duplicates HTML tags

Omeka S Development
1

Hi,
we have been trying to reuse the HTML code for a map with active buttons inside Omeka S.
Each button should link to a website. While we have managed to make the map and buttons appear, clicking on the buttons does not open any links, even if the <a> tag is present in the code.
I have checked and when I paste the code, the <button> tag is INSIDE the <a> tag, like this:


<a href="https://bipac.unimib.it/it/dipartimento-di-psicologia/"> 
<button class="psicita"></button> 
</a>

As soon as I hit Ok, the code gets rearranged like this:


<a href="https://bipac.unimib.it/it/dipartimento-di-psicologia/"> </a>
<button class="psicita"></button>
<a href="https://bipac.unimib.it/it/dipartimento-di-psicologia/"> </a>

If I re-correct the code, it does not stick: as soon as I click Ok again, the code gets changed again.

Has anyone experienced this before? Can it be caused by other parts of the code?
Is there a way out of this?

I am an Omeka S newbie and have very limited HTML skills.

Thank you for your assistance,

Francesca

2

The problem is that it’s not valid HTML for a button to be inside a link. So things like the HTML editor, or the HTML element filter, aren’t going to allow something written as you have above.

You might consider different markup to accomplish the same thing: possibly just plain links not containing buttons?

3

Thank you for your answer.
This is the effect I was trying to get:

I need to keep the colourful “squares”, and the map should be resizable.
Unfortunately, I am a bit out of my depth here, and I also do not have access to the whole setup, just the WYSIWYG part.
Do you have any suggestions?

Thank you,

Francesca V.

4

Try this: for each link, take the class from the button and put it on the link, then get rid of the button.

So instead of

<a href="https://bipac.unimib.it/it/dipartimento-di-psicologia/"> 
<button class="psicita"></button> 
</a>

you’d have

<a href="https://bipac.unimib.it/it/dipartimento-di-psicologia/" class="psicita">
</a>
5

Thank you, that did the trick!