MouseOver в нескольких изображениях на холсте - PullRequest
Новая
       18

MouseOver в нескольких изображениях на холсте

0 голосов
/ 10 марта 2012

У меня небольшая проблема с событием mouseOver, когда у меня есть несколько изображений на холсте. Я сделал простой пример с 2 изображениями, которые меняются при наведении мыши. Но я только хочу, чтобы одно изображение изменилось, а точнее - изображение, на котором мышь точно находится. Кто-то может мне помочь? Спасибо:

Вот основной код, который я написал: 

 <html>
<head>
    <script>
        var images = [{
            a : 'http://images1.wikia.nocookie.net/masseffect/images/thumb/1/18/Morinth002.png/613px-Morinth002.png',
            b : 'http://images.wikia.com/masseffect/images/5/55/Samara_biotics.png'
        }, {
            a : 'http://i.imgur.com/bxopz.jpg',
            b : 'http://1.bp.blogspot.com/-rLy6D22E_MA/TxGhdN4tQOI/AAAAAAAABDY/5daaYdNkLOc/s1600/yvonne4.jpg'
        }]

        //----------------------------------
        //  setImageOne
        //----------------------------------
        /**
         *  Coloca as imagens iniciais no canvas.
         */
        function setImageOne() {
            var canvas = document.getElementById('myCanvas').getContext('2d');
            var image = new Image();
            image.src = images[0].a;
            var image1 = new Image();
            image1.src = images[1].a;

            image.onload = function() {
                canvas.drawImage(image, 0, 0, 300, 250);
                canvas.drawImage(image1, 300, 0, 300, 250);
            };
        }

        //----------------------------------
        // setImageTwo
        //----------------------------------
        /**
         *  Coloca as imagens finais no canvas.
         */
        function setImageTwo() {
            var canvas = document.getElementById('myCanvas').getContext('2d');
            var image = new Image();
            image.src = images[0].b;
            var image1 = new Image();
            image1.src = images[1].b;

            image.onload = function() {
                canvas.drawImage(image, 0, 0, 300, 250);
                canvas.drawImage(image1, 300, 0, 300, 250);
            };
        }
    </script>
</head>
<body onload="setImageOne" onmousedown="return false;">
    <canvas id="myCanvas" width="600" height="250" onmouseover="setImageTwo()" onmouseout="setImageOne()"></canvas>
</body>

1 Ответ

0 голосов
/ 10 марта 2012

Ой, Лу.essa é uma soluçãozinha rapida, квалифицированное лицо, в котором я не участвую в Facebook или там, где бы вы ни находились.

...