I am using plotly.js and jquery.
I would like to have a custom hover effect with the images. I have seen the answer by Etpinard (here is the look and feel). But I think I need a different solution.
What I don't want to is to work with the iframe, while the mentioned solution works with it. Instead, I want to connect to $("path.point") and add a hover function there.
I have investigated what is inside the Plot. So, here is my html code:
<head>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
<script src="MakePlot.js"></script>
<script src="Mod2.js"></script>
</body>
And here is what I see inside:
I have tried to create a code, which would 'show the image' on hover, but it didn't work. So I have tried the log thing:
$(document.getElementById('myDiv')).ready(function () {
$("path.point").hover(function () {
console.log("SUCCESS!");
}, function() {})
});
And it shows nothing. So I guess I am addressing the object (that Plotly's path.point thing) in a wrong way.
Just in case, here is the code for image appearance:
$(document.getElementById('myDiv')).ready(function () {
$(this).css({backgroundColor:"#00FFFFFF", color: "#00FFFFFF"}).prepend('<img src="2368518-ghost.jpg" alt="" />');},
function () {
$(this).css({backgroundColor: "#00FFFFFF", color: "#00FFFFFF"});
$('img', this).remove()[0];
});
That is the code from that answer.
