easeljs hyperlink

Question

Easeljs - Hyperlinking.

Out of an easeljs script: how can I hyperlink to another web site? For instance: when an onClickEvent occurs another window would open - in my case I want to send a variable, an ID to another page with an SQL request on the ID for more details.

Any sample would be great.

score 1 · Answer 1 · answered May 06 '14 at 17:19

enter image description here

When you click on the red shape it will open google.com. You can add the hyperlink any easeljs object like this.

    <!DOCTYPE HTML>
<html>
<head>
<title></title>

<style>
    #myCanvas{
        background-color:#CCC;
    }
</style>

<script src="easeljs-0.7.1.min.js"></script>
<script src="jquery-1.7.2.min.js"></script>
<script>
var canvas, stage;
$().ready(function(e) {
    canvas = document.getElementById("myCanvas");
    stage = new createjs.Stage(canvas);
    var shape = new createjs.Shape();
    shape.graphics.beginFill("#ff0000").drawRect(0, 0, 100, 100);
    stage.addChild(shape);
    shape.x = 200, shape.y = 100;
    shape.addEventListener("click", goURL, false);
    stage.update();

});
function goURL(){
    window.open("http://google.com");
    }
</script>


</head>
<body onload="init()">
<canvas id="myCanvas" width="500" height="400">

</canvas>
</body>
</html>

score 0 · Answer 2 · answered Jan 16 '13 at 04:44

http://www.w3schools.com/jsref/met_win_open.asp

window.open(URL,name,specs,replace);

But be aware that popups/new tabs like this might be blocked by the browser if not followed an user-event. You could also retrieve the details via jQuery.get or jQuery.ajax ect.. and then display the information directly in your application.

score 0 · Answer 3 · answered Apr 13 '15 at 07:39

You can also use window.location in case you only want to redirect to another page instead of open a new window/tab. For example:

var id = 0 //the variable you want to pass;

shape.addEventListener("click", gotoURL);

function gotoURL(){
  location.assign( 'http://yoursite.com/search?id='+id );
}

easeljs hyperlink

3 Answers3