Is it possible to have a hyperlink trigger a javascript function on hover?

Question

So i've used the guide listed here about triggering javascript with a button or hyperlink by adding the javascript:function(); code to the URL destination, and it works fine for some buttons i use, but now i'm trying something a little more complicated. 

My idea here is to apply an onmouseover event to a text selection that calls a function to create a div and fill it with text. the function all works fine, however when i set the hyperlink URL to javascript:createGlossDiv(parameter); it exports as requiring a click to trigger the function. 

I even tested the js URL to say javascript:this.onload=this.addEventListener('mouseover',createGlossDiv(parameter));

and 

javascript:this.addEventListener('mouseover',createGlossDiv(parameter));

but they are still only able to be triggered by a click. any thoughts? is it possible to just apply a onmouseover="createGlossDiv(parameter)" ?

Edit: I forgot to mention that the createGlossDiv() function has been tested with an addEventListener when the URL js didnt include that, still with no luck.

Comments

I believe i figured it out. By adding in a closing " and the onmouseover event code into the hyperlink url i was able to trick the code into producing what i want.

What i entered into the hyperlink url field:

javascript:null"onmouseover="createGlossDiv('term');

after exporting the element reads:

<span class="hyperlink"><a href="javascript:null"onmouseover="createGlossDiv('term');">The hyperlink text is here and hovering over it triggers the function.</a></span>

And it works as intended! Mostly... Still some kinks to work out.

---

Glad you're making progress! I don't know how many coders are here in the Answer Exchange, but hopefully someone can get the last little bit for you.

You might also look at the Adobe ID Scripting forum, the Facebook group on InDesign scripting, or the CreativePro forums to find folks who might be able to help. 

---

got it solved! However my new question is how to properly make use of the scaling factor in5 uses for page scaling. If i place my auto-generated divs within the container div, they scale properly, but the cursor tracking is off as its position is window based and the divs position is based on the page position which is scaled. If given the following code to track cursor position, what do i need to add to get its position to be  multiplied by the scaling factor?

window.onmousemove = function (e) {

var x = e.clientX,

y = e.clientY;

container.style.top = (y+20) + 'px';

container.style.left = (x+20) + 'px';

};

---

I suggest you look in the in5.config.js code. There are examples where getCurrentScale($('#container')) is used to get the current scaling, which you can then multiply by the x and y values.

---

so i was able to get the scalefactor and translateX no problem, but when i try to subtract translateX from x it breaks the position entirely.

So this works fine, but its left position is off by an amount equal to the translateX of #container.

var scaleFactor = getCurrentScale($('#container'));

var transX = Number($('#container').css('transform').split(/,/g)[4]);

 

window.onmousemove = function (e) {

var x = e.clientX / scaleFactor,

y = e.clientY / scaleFactor;

container.style.top = (y) + 'px';

container.style.left = (x) + 'px';

console.log(x, y , container.style.left , container.style.top);

};

But this breaks, despite my log spitting out a left position = newx and a top position = y. for some reason, neither the left or top position are showing up in the inspector HTML.

var scaleFactor = getCurrentScale($('#container'));

var transX = Number($('#container').css('transform').split(/,/g)[4]);

 

window.onmousemove = function (e) {

var x = e.clientX / scaleFactor,

y = e.clientY / scaleFactor;

var newx = x-transX;

container.style.top = (y) + 'px';

container.style.left = (newx) + 'px';

console.log(newx, y , container.style.left , container.style.top);

};

---

I think transX is irrelevant in this case. 

Actually if you put your HTML inside the container (and applied absolute positioning) then it would automatically be scaled by the existing code that's already applied to the container.

This is getting into the area of extreme customization, and outside of what we can support. I would recommend getting assistance directly from a web developer.

---

The div itself was scaling properly when placed within the container, however there was some discrepancy between the clientX/clientY and the actual left/top of the div due to the scale factor. I was able to figure it out though, and add some code so that the newly formed div wouldn't draw beyond the container frame, in case anyone is interested heres what i did. 

var scaleFactor = getCurrentScale($('#container'));

var container = $('#container');

var glosspop = $('#glossary-popup')

innerDivWidth = 340;

innerDivHeight = glosspop.outerHeight();

var offset = container.offset();

var l = offset.left;

var t = offset.top;

var h = 768;

var w = 1024;

var lScale = l/scaleFactor;

var maxx = lScale + w - innerDivWidth - 20 ;

var maxy = t + h - innerDivHeight - 20;

window.onmousemove = function (e) {

var x = e.clientX / scaleFactor,

y = e.clientY / scaleFactor;

if(y <= maxy && y >= t) {

$('#glossary-popup').css({

top: (y+20) + 'px'

});

}

else {

$('#glossary-popup').css({

top: (maxy+20) + 'px'

});

}

if(x <= maxx && x >= lScale) {

$('#glossary-popup').css({

left: (x-lScale+20) + 'px'

});

}

else {

$('#glossary-popup').css({

left: (maxx-lScale+20) + 'px'

});

}

// console.log(y, t, h, innerDivHeight, maxy);

};

I'm thinking i'm half-way to a web-developer at this point! XD