KineticJS鼠標懸停

我試圖改變鼠標指針鼠標懸停圖像的圖像，這裏是我的腳本：KineticJS鼠標懸停

   var sc = new Kinetic.Layer(); 
       var sCircle = new Image(); 
       var sCircleImage; 
       sCircle.onload = function() { 
        sCircleImage = new Kinetic.Image({ 
         x: 186.183, 
         y: 185.89, 
         width: 142.114, 
         height: 140.22, 
         image: sCircle 
        }); 
        sc.add(sCircleImage); 
        sc.draw(); 
       }; 
       sCircle.src = '../../Content/images/arrow_circle.png'; 



       sCircleImage.on('mouseover', function() { 
       document.body.style.cursor = 'pointer'; 
       }); 
       sCircleImage.on('mouseout', function() { 
       document.body.style.cursor = 'default'; 
       });

我收到以下錯誤：無法獲取的未定義或空引用「上」屬性。我希望你的建議。提前致謝。

來源

2013-03-22 hncl

在圖像加載函數內部使用mouseover和mouseout函數。請嘗試下面的代碼

<!DOCTYPE HTML> 
<html> 
<head> 
    <style> 
     body 
     { 
      margin: 0px; 
      padding: 0px; 
     } 
    </style> 
</head> 
<body> 
    <div id="container"> 
    </div> 
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script> 
    <script> 
     var stage = new Kinetic.Stage({ 
      container: 'container', 
      width: 578, 
      height: 200 
     }); 
     var sc = new Kinetic.Layer(); 
     var sCircle = new Image(); 
     var sCircleImage; 
     sCircle.onload = function() { 
      sCircleImage = new Kinetic.Image({ 
       x: 186.183, 
       y: 185.89, 
       width: 142.114, 
       height: 140.22, 
       image: sCircle 
      }); 
      sc.add(sCircleImage); 
      sc.draw(); 
      stage.add(sc); 
      sCircleImage.on('mouseover', function() { 
       document.body.style.cursor = 'pointer'; 
      }); 
      sCircleImage.on('mouseout', function() { 
       document.body.style.cursor = 'default'; 
      }); 
     }; 
     sCircle.src = '../../Content/images/arrow_circle.png'; 
    </script> 
</body> 
</html>

來源

2013-03-22 10:02:29

非常感謝，它工作得很好。 – hncl 2013-03-22 15:33:24

KineticJS鼠標懸停

回答

相關問題