How can I show the URL to which a button points in the down left corner of display?

Question

I have put a button that records clicks on an external website and appears like an URL. I want users to be able to see the link URL in the bottom-left part of the monitor when they hover over the link (button) like the usual hovering over a link does. How can I do that?

Answer 1

You could try and switch the button into a link, e.i., <a>.

Then you could attach a click event to the link, so it could work like a button. For example submit the page:

<a href="https://www.link-to-display" onclick="clickFunction()">https://www.link-to-display</a>

The clickFunction() must then be defined and do what you want it to do...

<script type="text/javascript">
function clickFunction() {
    window.open("https://www.link-to-display");
    SoSciTools.submitPage()
}
</script>

Further (or less) contents may be necessary, depending on what your button currently does.

Comments

The reason I use a button is because I want to record if people have clicked on that link and I have followed the "Record clicks through a jump to a page" instructions and if I change it, it will not do that. Is there some other way?

---

How does your button look at the moment, i.e., which HTML code are you using?

---

buttonToPage('link01', 'https://secuso.aifb.kit.edu/english/642.php', '%link01%', 'likelink');
html('<p> %link01%  Research Group Security • Usability • Society (SECUSO)</p>');


// Formating the button
pageCSS('
button.likelink {
  background-color: transparent;
  border: 0 none;
  padding: 0;
  color: #6784c1;
  text-decoration: underline;
cursor: pointer;
font-size:15px;
font-weight:bold;

}

button.likelink:hover {
  background-color:#cccccc;
}
button.likelink:hover:before {
  content:attr(data-src);        
  position:absolute;
  top:100%;
  left:0;
}


');
 
// No normal "Next" button
buttonHide();
 
// Initialize the internal variable (Code 1)
put('IV01_01', 1);

option('progress', 100);


on the next page I have the redirect function

---

Alright, if you're using `buttonToPage()` you will not have direct access to the HTML code. No problem ... we can extract the parameters and put them into the form.

As this may be relevant oto others, as well, I have added an explanation in the manual: https://www.soscisurvey.de/help/doku.php/en:create:functions:buttontopage#javascript