HS Canvas 图像悬停/交换答案

【问题标题】：HS Canvas image hover/swapHS Canvas 图像悬停/交换
【发布时间】：2016-01-28 06:39:21
【问题描述】：

该项目的想法是根据这张图片制作一个小部件，我知道它在 B&W grey scale full 中。我将每个图像与文本放在单独的图像中，例如每个部分的First green section（蓝色外环分为5个与文本对应的图像）

我已经制作了一个画布并将图像设置为单独的 div，这样我就可以添加悬停效果，这将允许我将图像更改为相应的黑白图像或悬停效果。

我的问题是我无法理解如何在 JS 中使用诸如 onmouseover 之类的事件。这是我的完整代码（我可以使用 jQuery、bootstrap 等任何东西）。

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8">

    <title>PI Security Widget</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="css/styles.css?v=1.0">

    <!--[if lt IE 9]>
    <script src="js/jquery-1.12.0.min.js"></script>
    <![endif]-->


    <!--[JQuery]-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <!--[JQuery]-->

    <!--[CSS]-->
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
    <link href="css/effects.min.css" rel="stylesheet">
    <!--[END CSS]-->

    <!--[Bootstrap]>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!--[Bootstrap]-->

</head>

<body>

<div id="header">
    <h1>test</h1>
</div>


<!--<div class="hovereffect">-->
    <!--<img class="img-responsive" src="images/b2.png" alt="">-->
    <!--<div class="overlay">-->
    <!--</div>-->
<!--</div>-->


<div id="container">
    <h1>Test chart</h1>
    <canvas id="myCanvas" width="700" height="700"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');


        $("#canvas").mousemove(function (e) {
            handleMouseMove(e);
        });

    </script>
<!--</div>-->


<div id="whitering">
    <script>
        var whitering = new Image();

        whitering.onload = function() {
            context.drawImage(whitering, 69, 50);
        };

        whitering.src = 'images/white.png';

    </script>
</div>


<div id="b1">
    <script>
        var b1 = new Image();

        b1.onload = function() {
            context.drawImage(b1, 69, 50);
        };

        b1.src = 'images/b1.png';

    </script>
</div>

    <div id="b2">
        <script>
            var b2 = new Image();

            b2.onload = function() {
                context.drawImage(b2, 69, 50);
            };

            b2.src = 'images/b2.png';

        </script>
</div>

 <div id="b3">
        <script>
            var b3 = new Image();

            b3.onload = function() {
                context.drawImage(b3, 69, 50);
            };

            b3.src = 'images/b3.png';

        </script>
</div>

<div id="b4">
        <script>
            var b4 = new Image();

            b4.onload = function() {
                context.drawImage(b4, 69, 50);
            };

            b4.src = 'images/bN.png';

        </script>
</div>

<div id="b5">
        <script>
            var b5 = new Image();

            b5.onload = function() {
                context.drawImage(b5, 69, 50);
            };

            b5.src = 'images/bN.png';

        </script>
</div>


<div id="greentab1">
    <script>
        var g1 = new Image();

        g1.onload = function() {
            context.drawImage(g1, 69, 50);
        };

        g1.src = 'images/g1.png';

    </script>
</div>

<div id="greentab2">
    <script>
        var g2 = new Image();

        g2.onload = function() {
            context.drawImage(g2, 69, 50);
        };

        g2.src = 'images/g2.png';

    </script>
</div>

<div id="greentab3">
    <script>
        var g3 = new Image();

        g3.onload = function() {
            context.drawImage(g3, 69, 50);
        };

        g3.src = 'images/g3.png';

    </script>
</div>

<div id="greentab4">
    <script>
        var g4 = new Image();

        g4.onload = function() {
            context.drawImage(g4, 69, 50);
        };

        g4.src = 'images/g4.png';

    </script>
</div>

<div id="greentab5">
    <script>
        var g5 = new Image();

        g5.onload = function() {
            context.drawImage(g5, 69, 50);
        };

        g5.src = 'images/g5.png';

    </script>
</div>

<div id="greentab6">
    <script>
        var g6 = new Image();

        g6.onload = function() {
            context.drawImage(g6, 69, 50);
        };

        g6.src = 'images/g6.png';

    </script>
</div>

<div id="yellowtab1">
    <script>
        var y1 = new Image();

        y1.onload = function() {
            context.drawImage(y1, 69, 50);
        };

        y1.src = 'images/y1.png';

    </script>
</div>

<div class="yellowtab2">
    <script>
        var y2 = new Image();
        y2.id="yellowtab2" ;

        y2.onload = function() {
            context.drawImage(y2, 69, 50);
        };

        y2.src = 'images/y2.png';

//        function changeImage() {
//            var image = document.getElementById('yellowtab2');
//            if (image.src.match("y2")) {
//                image.src = "images/y2.png";
//            } else {
//                image.src = "images/y2BW.png";
//            }
//        }
//
//        y2.onload = function() {
//            context.onmouseover(this.src = 'images/y2.png');
//        };
//
//        y2.onload = function() {
//            context.onmouseout(this.src = 'images/y2BW.png');
//        };
//


//        $(document).ready(function(){
//            $(".y2").hover(function() {
//                $(this).attr("src","images/y2BW.png");
//            }, function() {
//                $(this).attr("src","images/y2.png");
//            });
//        });

    </script>
</div>



</div>




<div id="footer">
    <h1>sadasds </h1>
</div>



</body>
</html>

我知道当您运行代码时图片不会显示，我有一个包含所有单独图片的 zip 文件，但我似乎无法上传。

任何有关如何使这项工作的帮助将不胜感激！

【问题讨论】：

请不要在标题中添加“紧急” - 在志愿者网站上，所有问题都具有相同的优先级。

标签： javascript jquery html css canvas

【解决方案1】：

您的 div 中只有 js 用于将图像绘制到一个画布中，所以......它们根本不会真正分离您的图像。我认为画布上的鼠标悬停也需要手动测试图像边界。

由于所有可悬停的形状都不是正方形，因此使用 svg 甚至图像地图似乎可以更好地完成您的尝试。如果您的图形是 svg，您应该能够在其中的任何部分进行操作和悬停，如果您使用老式图像地图，您可以只显示单独的悬停 png 绝对定位在灰色图形上，但需要您的图像地图作为一个清晰的 png 定位在所有其他图形之上。

SVG 可能是不规则形状的最佳解决方案。然后，您可以只使用 css 更改部分颜色。

【讨论】：