8

Can I put a Raphael.js canvas over an IMG element? What should I do make this layout work?

Vitor Py
  • 5,145
  • 4
  • 39
  • 62

2 Answers2

16

Simply position the Raphaël canvas over the top of the image element using normal CSS techniques:

#wrapper {
    position: relative;
    padding: 0;
    outline: 1px solid #999;
}
#wrapper img {
    position: absolute;
    top: 0;
    left: 0;
}
#canvas {
    position: absolute;
    top: 0;
    left: 0;
}

Then nest your elements like this:

<div id="wrapper">
    <img src="myimage.jpg">
    <div id="canvas">  
    </div>
</div>

Here's a full example.

robertc
  • 74,533
  • 18
  • 193
  • 177
  • unfortunately it seems that rendering it over the the of HTML makes it impossible to interact with the things below. I dropped in jQuery and removed the image and added text - the text under the svn is not selectable... http://img339.imageshack.us/img339/8051/pictureqy.png – cwd Oct 25 '12 at 04:09
  • 2
    @cwd [See `pointer-events: none`](https://developer.mozilla.org/en-US/docs/CSS/pointer-events) – robertc Oct 25 '12 at 08:11
0

z-index:2 or some high number for the raphael "paper" div (aka your raphael canvas... which you refer to by:

var paper = Raphael('somediv', 100, 400)

so just go to your css and at #somediv make sure you put it's z-index lower and then put your text div's z-index higher...

aaron p
  • 443
  • 1
  • 5
  • 10