Highlighting HTML element on mouse hover canvas shape using canvas shape name

Question

I'm having some problems with my javascript canvas application, where I try to change the background color of an html element outside the canvas area when mouse the mouse cursor is over a canvas shape. I'm using konva library.

What I'm trying to do in code is to target the html side text class and colorize its background when mouse cursor is over canvas element shape building. Moving to different buildings it highlights different text elements to show what areas are in that building. When cursors leaves the canvas building area and is not on any other building it highlights no text elements. Its like an interactive map.

So what I'm asking is, how can I highlight text element on html side when hovering over canvas shape then stop highlighting when leaving the canvas shape while using konva library?

    var stage = new Konva.Stage({
      container: 'container',
      width: 600,
      height: 800
    });

var layer = new Konva.Layer();

//just few buildings for example
var shapes = [];

shapes.push({
    points: [117,188,218,188,218,218,137,218,137,225,117,225],
    name: "Building-A",
    link: "a-building-link",
});

shapes.push({
    points: [230,185,255,185,255,310,250,310,250,318,237,318,237,310,230,310],
    name: "Building-B",
    link: "b-building-link",
});

shapes.push({
    points: [261,134,367,134,367,152,261,152],
    name: "Building-C",
    link: "c-building-link",
});

for (var i = 0; i < shapes.length; i++) {
    var s = shapes[i];
    //var links = document.getElementsByClassName(s.link);
 		var poly = new Konva.Line({       
		points: s.points,
     	fill: 'rgba(255,0,0,0.2)',
      	stroke: 'black',
      	strokeWidth: 3,
      	closed : true,
        name: s.link,
        opacity: 0
            });

            poly.on('mouseover', function () {
                this.opacity(1);
                layer.draw();
                //Some things I tried to get this working
                //for (var i = 0; i < links.length; i++) {
                //var item = links[i];
                    //item.style.backgroundColor = "#ffcc00";
               //}
                /////////////////
                //var item = this.name;
                //item.style.backgroundColor = "#ffcc00";
                ////////////////
                //document.getElementsByClassName(this.name).style.backgroundColor = "#ffcc00";
                ///////////////
                //highlight_target = this.name;
                ///////////////
                //document.getElementsByClassName(${this.name}).style.backgroundColor = "#ffcc00";
                ///////////////
                //document.getElementsByClassName(s.name).style.backgroundColor = "#ffcc00";
            });

            poly.on('mouseout', function () {
                this.opacity(0);
                layer.draw();
                //Some things I tried to get this working
               //for (var i = 0; i < links.length; i++) {
                    //var item = links[i];
                    //item.style.backgroundColor = "";
               //}
                /////////////
                //var item = this.name;
                //item.style.backgroundColor = "";
                /////////////
                //document.getElementsByClassName(this.name).style.backgroundColor = "";
                /////////////
                //highlight_target = "";
                /////////////
                //document.getElementsByClassName(${this.name }).style.backgroundColor = "";
                /////////////
                //document.getElementsByClassName(s.name).style.backgroundColor = "";
            });

    layer.add(poly);
} 

stage.add(layer);

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div id="container"></div>
  <div class="textlink a-building-link b-building-link">
                <span>Place 1</span>
                <span>A, B</span>
                <span>1</span>
            </div>
            <div class="textlink c-building-link">
                <span>Place 4 and 5</span>
                <span>C</span>
                <span>3</span>
            </div>
            
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <script type="text/javascript" src="test.js"></script>



</body>
</html>

Thanks for any help.

Vanquished Wombat Vanquished Wombat · Accepted Answer · 2017-11-15T09:07:24

You were very close. To get the name of the shape you need to use .name(). After that it looks like some of your code would have worked.

I moved the building shapes layer up the page and put the text at the top in the snippet so that it is more clear what is going on for other future readers. Additionally, since Konvajs relies on jquery being present, you can use the handy jquery selector mechanism to access your test elements. This is not critical to the solution.

var stage = new Konva.Stage({
      container: 'container',
      width: 600,
      height: 400
    });

var layer = new Konva.Layer();

//just few buildings for example
var shapes = [];

shapes.push({
    points: [117,188,218,188,218,218,137,218,137,225,117,225],
    name: "Building-A",
    link: "a-building-link",
});

shapes.push({
    points: [230,185,255,185,255,310,250,310,250,318,237,318,237,310,230,310],
    name: "Building-B",
    link: "b-building-link",
});

shapes.push({
    points: [261,134,367,134,367,152,261,152],
    name: "Building-C",
    link: "c-building-link",
});

for (var i = 0; i < shapes.length; i++) {
    var s = shapes[i];
    //var links = document.getElementsByClassName(s.link);
 		var poly = new Konva.Line({       
		points: s.points,
     	fill: 'rgba(255,0,0,0.2)',
      	stroke: 'black',
      	strokeWidth: 3,
      	closed : true,
        name: s.link,
        opacity: 0.5
            });

            poly.on('mouseover', function () {
                this.opacity(1);
                layer.draw();

                // use name() to ge the name. I then use the name as a jquery selector. 
                $('.' +this.name()).css({ backgroundColor: "#ffcc00"});
            });

            poly.on('mouseout', function () {
                this.opacity(0.5);
                layer.draw();
                $('.' +this.name()).css({ backgroundColor: "transparent"});
            });

    layer.add(poly);
    layer.move({x:0, y:-40}) // make layer nearer the top of page for SO.
    stage.draw();
} 

stage.add(layer);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <div class="textlink a-building-link b-building-link">
                <span>Place 1</span>
                <span>A, B</span>
                <span>1</span>
            </div>
            <div class="textlink c-building-link">
                <span>Place 4 and 5</span>
                <span>C</span>
                <span>3</span>
            </div>
  <div id="container"></div>
            
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="https://cdn.rawgit.com/konvajs/konva/1.7.6/konva.min.js"></script>
    <script type="text/javascript" src="test.js"></script>



</body>
</html>

Highlighting HTML element on mouse hover canvas shape using canvas shape name

1 Answers