Hi, I have a tree with nodes. Some of them have a small picture that I want to show magnified if user hover with mouse over the small picture.
It works but I can show only first picture magnified by hover.
How I get hover to show for every node’s picture exact the picture hovered actually.
I tried to write the node name into a hidden input and use it to get node’s name to access the appropriate picture but it friezes with picture of first hovered node.
How I can get it to show for every hovered node the picture belonging to the node?
Below an idea how it’s done now - it’s a modified code from some example.
Please help.
Within the node definition I have:
{
mouseHover: function(e, obj) {
var node = obj.part;
jQuery("[name='matNoHover']").val(node.data.text);
nodeHoverAdornment.adornedObject = node;
node.addAdornment("mouseHover", nodeHoverAdornment);
}
}
and the definition of nodeHoverAdornment looks like below:
var nodeHoverAdornment =
$(go.Adornment, "Spot",
{
background: "transparent",
mouseLeave: function(e, obj) {
var ad = obj.part;
ad.adornedPart.removeAdornment("mouseHover");
}
},
$(go.Placeholder,
{
background: "transparent", // to allow this Placeholder to be "seen" by mouse events
isActionable: true, // needed because this is in a temporary Layer
click: function(e, obj) {
var node = obj.part.adornedPart;
node.diagram.select(node);
}
}),
$(go.Picture, { desiredSize: new go.Size(150, 150),
margin: 2,
source: 'http://.../' + getPicture(jQuery("[name='matNoHover']").val())) })
);