CODEWITHSUNDEEP
javascriptjqueryhtmlcsscanvas
E235
E235

Reputation: 13440

How to push image (behind canvas) to front in order for its onclick function to work

I have image of a pawn on a board.
The image has onclick function that when you press on it you should recive an alert.
The problem is that above the image there is canvas that hides the functionality of the onclick.

When I put the mouse mouse cursor (using Chrome's magnifying galss) you can see that the canvas is on top of the pawn's images:
enter image description here

With canvas:
JSFIDDLE: when click pawn nothing happens

Without canvas:
JSFIDDLE: when click pawn receive alert

How can I keep the canvas and push the pawn image to front in order for the onclick function to work?

CSS:

td {
    width: 100px;
    height: 90px;
    text-align: left;
    vertical-align: top;
    border: 1px solid black;
    position: relative;
}
table
{
    position: fixed;
    left:9px;
    top:8px;
}

tr:nth-child(even) td:nth-child(odd), tr:nth-child(odd) td:nth-child(even)
{
    background:#00A2E8;
}

td span {
    position: absolute;
    bottom: 0;
}

#myCanvas {
    z-index: 10;
    position:absolute;
    font:bold;
    color:red;

}

HTML: 

<body>

<div id="board" value="5">

<table oncontextmenu="return false">
<tbody>
    <tr>
        <td class="" cellnumber="21" row="4" col="0"><span>21</span></td>
        <td class="" cellnumber="22" row="4" col="1"><span>22</span>
        <br><br><p class="SnakesAndLadders" from="22" to="6">Snake to 6 </p></td>
        <td class="" cellnumber="23" row="4" col="2"><span>23</span></td>
        <td class="" cellnumber="24" row="4" col="3"><span>24</span></td>
        <td class="" cellnumber="25" row="4" col="4"><span>25</span></td>
        </tr>
        <tr>
     <td class="" cellnumber="16" row="3" col="0"><span>16</span></td>
     <td class="" cellnumber="17" row="3" col="1"><span>17</span></td>
     <td class="" cellnumber="18" row="3" col="2"><span>18</span></td>
      <td class="" cellnumber="19" row="3" col="3"><span>19</span></td>
     <td class="" cellnumber="20" row="3" col="4"><span>20</span></td></tr>
     <tr>
     <td class="" cellnumber="11" row="2" col="0"><span>11</span></td>
     <td class="" cellnumber="12" row="2" col="1"><span>12</span></td>
     <td class="" cellnumber="13" row="2" col="2"><span>13</span></td>
     <td class="" cellnumber="14" row="2" col="3"><span>14</span></td>
     <td class="" cellnumber="15" row="2" col="4"><span>15</span>
     <br><br><p class="SnakesAndLadders" from="15" to="24">Ladder to 24 </p>
     </td>
     </tr>
     <tr>
    <td class="" cellnumber="6" row="1" col="0"><span>6</span></td>
    <td class="" cellnumber="7" row="1" col="1"><span>7</span></td>
    <td class="" cellnumber="8" row="1" col="2"><span>8</span></td>
    <td class="" cellnumber="9" row="1" col="3"><span>9</span></td>
    <td class="" cellnumber="10" row="1" col="4"><span>10</span></td>
               </tr>
                    <tr>
                        <td class="" cellnumber="1" row="0" col="0"><span>1</span>
                         <img src = "http://s23.postimg.org/ynlvim1x3/image.png" onclick="doSomething()">
                 </td>
    <td class="" cellnumber="2" row="0" col="1"><span>2</span></td>
    <td class="" cellnumber="3" row="0" col="2"><span>3</span></td>
    <td class="" cellnumber="4" row="0" col="3"><span>4</span></td>
    <td class="" cellnumber="5" row="0" col="4"><span>5</span></td>
                 </tr>

                </table>
     <canvas id="myCanvas" width="600" height="500"></canvas>
     <canvas id="myCanvas2" width="600" height="500"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');

      context.beginPath();
      context.moveTo(50, 45);
      context.lineTo(500, 450);
      context.stroke();
      context.stroke();

      function doSomething()
       {
         alert("Ping");
        }
    </script>

Upvotes: 0

Views: 239

Answers (4)

nrvnm
nrvnm

Reputation: 191

Like this? jsfiddle.net/hrLo5a3b/

Just moved canvas out of the table and removed z-index. Looks like your example but pawn reacts on alert.

EDIT (Can't make comments yet so will put it here in my post):

Don't forget that pointer-events does not work in IE 10 and earlier versions. Also does not work on links in IE11.

Upvotes: 1

markE
markE

Reputation: 105035

If the canvas is doing nothing other than drawing lines, then just tell the browser not to listen for events on the canvas:

#myCanvas{
  pointer-events: none;
}

Demo: http://jsfiddle.net/m1erickson/La292q67/5/

Upvotes: 3

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

You just need a position and z-index on the imnage http://jsfiddle.net/La292q67/3/

for the image I add class .pingit 

.pingit{
    position: relative;
    z-index: 99999;
}

Upvotes: 0

Toiletduck
Toiletduck

Reputation: 211

You can solve this using z-index (CSS property). Set the element with the onclick as z-index:2 and the canvas as z-index:1.

This only works on positioned elements though, so you'll have to work with that.

Upvotes: 0

Related Questions