I'd like to change visibility of a panel when mouse over on or mouse leave off a picture. How to do it?

@ironwill1023 wrote:

This is the picture: https://monosnap.com/file/T4X84QwvM3uxTDf5d2uop5zDr9h6Ya
When I hover over the picture, I’d like to display overlay like this: https://monosnap.com/file/sPHAjEVCIkcWaJKX772t1aWluqajtY

And when mouse leaves, I’d like to hide overlay.

To do so, I already made picture and overlay panel:

        $(go.Picture,
          {
            name: "screenshot",
            desiredSize: new go.Size(193, 145),
          },
          new go.Binding("source", "screenshot"),
          {
            mouseOver: function(e, obj) {
           
            },
            mouseLeave: function(e, obj) {

            }
          }
        ),
        $(go.Panel, "Auto",
          {
            name: "hover-screenshot-panel",
            visible: false,
          },
          new go.Binding("visible", "visibilityOfPageFunctionPanel").ofModel(),
          $(go.Shape, "Rectangle",
            {
              name: "hover-bg",
              stroke: null,
              fill: "rgba(49, 67, 76, 0.9)" 
            }
          )
        )

(*Fyi, I’m building Angular project and I made separate ts file for node template.)
So how do I toggle visibility of overlay panel?
Regards

Posts: 8

Participants: 3

Read full topic