Question

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

我制作了一个画布并将图像设置为单独的div，这样我就可以添加一个悬停效果，这样我就可以将图像更改为相应的B＆amp; W图像或悬停效果。

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

＆＃13;

<!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>

＆＃13;

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

非常感谢任何有关如何使这项工作的帮助！

Answer 1

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

通过使用svg甚至图像映射，您尝试做的事情似乎更好，因为所有可挖掘的形状都不是正方形。如果你的图形是一个svg，你应该可以操作并在它的任何部分上盘旋，如果你使用旧式图像地图，你可以只显示单独的悬停png绝对位于灰色图形上，但是需要你的图像映射作为一个清晰的png定位在所有其他图形上。

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

HS画布图像悬停/交换

1 个答案: