Geek Answers Handbook

Include HTML5 canvas element in a link

What is the best way to turn a Canvas element into a link - by this I mean the entire canvas element, not just a part of the image.

I tried the obvious thing - wrapping an element in element A, but troubleshooting in IE9.

Take this markup, for example:

<a href="#link">
  <canvas width="100" height="100">
    //fallback
  </canvas>
</a>

Using CSS, I developed the background color of the link to change to hover, and I am in most modern browsers that support the canvas, it works as expected - you hover over, the background changes color, you click on the link, the link will follow.

However, in IE9, when hovering over an element, it does not recognize that it is a link - there is no freezing effect, while the cursor does not switch to a pointer, pressing nowt does it.

Interestingly, if I add 1 pixel border to element A and put the mouse on the map at 1 pixel border, IE9 recognizes this link, and after that you can move the mouse over the canvas and keep it hanging and works like a link.

It is almost as if the canvas redefines the link, so the browser cannot recognize the link, only the canvas element - if that makes sense?

So I just want to make sure:

  • Is it acceptable to simply wrap the Canvas element in element A - is it just IE9, which is weird, or am I doing it wrong?
  • If I am doing it wrong, what is the accepted technique for this seemingly simple task?

thank

UPDATE

, , , , , , . , , , - , - , JavaScript - .

, , . RGBA . , . , , :)

+5
4

100% canvas IE, onclick canvas, , .

document.getElementById("mycanvas").onclick = function(e){
    window.location.href = 'http://www.google.com';
};

: http://jsfiddle.net/jonathon/HtmVS/

(, mousein/mouseout), , .

+5

javascript onclick CSS, cursor: pointer;. canvas:hover CSS . <a>, "" /.

+4

, jQuery, , .

$("#myCanvasId").click(function(){
window.open("https://www.google.com");
});
+2

A cross-browser way to do this is to simply place the div on top of the canvas, which has the same position and pixel width and height as the canvas. Then set the click handler on this div to the handler and use window.location.href, as suggested in an earlier answer.

...
<canvas id=".. >
<div id="overlay"/>
...
0
source

More articles:


All Articles