Skip to main content
HSS Sursee
Known Participant
July 10, 2023
Answered

Starting elements on HTML canvas

  • July 10, 2023
  • 1 reply
  • 536 views

I am building a HTML-File with an interactive map. When I am starting or testing the File it always shows me all of the elements I have on the canvas. How can I define what elements I want to be shown at my starting point?

 

I uploaded 2 pictures, one how I want it to look and the other how it is at the moment.

 

Thank you in advance for all the Help.

    This topic has been closed for replies.
    Correct answer kglad

    use the visible property to toggle objects on and off.  eg, 

     

    this.t1.visible=false; // a text object

    this.e1.addEventListener("mouseover",overF1.bind(this));  // e1 a hotspot object

    this.e1.addEventListener("mouseout",outF1.bind(this));

    function overF1(){

    this.t1.visible = true;

    }

    function overF1(){

    this.t1.visible = false;

    }

     

    and, if you have 50 of these, you can use a for-loop to quickly/easily encode them all.

    1 reply

    kglad
    Community Expert
    kgladCommunity ExpertCorrect answer
    Community Expert
    July 10, 2023

    use the visible property to toggle objects on and off.  eg, 

     

    this.t1.visible=false; // a text object

    this.e1.addEventListener("mouseover",overF1.bind(this));  // e1 a hotspot object

    this.e1.addEventListener("mouseout",outF1.bind(this));

    function overF1(){

    this.t1.visible = true;

    }

    function overF1(){

    this.t1.visible = false;

    }

     

    and, if you have 50 of these, you can use a for-loop to quickly/easily encode them all.

    HSS Sursee
    Known Participant
    July 12, 2023

    Hello

    I am working with the visible property for my objects. But I was only able to link it with an action.

    My problem is, that when I start the file all objects are still visible and only by clicking the button they turn invisible.

    How can I evade that or where do I need to add the code to make the objects invisible?

     

    Thank you in Advance for your help.

    kglad
    Community Expert
    Community Expert
    July 12, 2023

    the first line of my suggested code shows one way to do that.