how we can use canvas tag with hyper link tag

Question

// This is the code in html part

<canvas id="canvas" width="684" height="606" style="background-color:#999999">

</canvas>
<a href="links/animation.html"><div style="width: 630px;height: 130px;" id="animation"></div></a>
<a href="pa1.html"><div style="width: 630px;height: 190px;" id="PA"></div></a>
<a href="web.html"><div style="width: 630px;height: 135px;" id="web"></div></a>

//This is the code in css part
#PA{
  position:relative;
  top:-545px;
  left:480px;
}
#web{
  position:relative;
  top:-510px;
  left:460px;
}
#animation{
  position:relative;
  top:-590px;
  left:460px;
}

This code created hyper link in canvas..But it is taking space after the canvas tag. I tried all the examples. But its not working. What is the problem in my code.

score 0 · Accepted Answer · edited May 23 '17 at 12:11

0

You can use position:absolute;, which makes the the <a>s position relative to the document, like this:

a:nth-of-type(1){
  position:absolute;
  top:50px;
  left:50px;
  background:red;
}

a:nth-of-type(2){
  position:absolute;
  top:100px;
  left:100px; 
  background:pink;
}

a:nth-of-type(3){
  position:absolute;
  top:150px;
  left:150px; 
  background:purple;
}

canvas{
    border:1px solid black;
}

P.S. I removed the divs from inside of the as, because divs (block-level element) are not at all meant to be inside of an inline element. Instead, put a elements inside of divs if necessary. (Further reading)

edited May 23 '17 at 12:11

Community

1
1

answered Mar 18 '14 at 05:51

Gaurang Tandon

6,504
11
47
84

In a canvas i have created 3 boxes.I have given 3 links to that boxes. It is my problem – user3232585 Mar 18 '14 at 06:42
I have another 3 links before these tags. If i applied u r code it will also apply to other links. I m not getting.. – user3232585 Mar 18 '14 at 07:12
@user3232585 You want those 3 boxes to be inside the `canvas` ? – Gaurang Tandon Mar 18 '14 at 07:16

how we can use canvas tag with hyper link tag

1 Answers1