jcrop turns transparent image black

Question

I would like to use jcrop to select an area on something that has built in javascript which I can't modify. This javascript is interfering with jcrop i think. so I tried putting a transparent gif over the top of the thing I would like to select. This stopped the thing underneath interfering with jcrop and I coudl select areas fine. Jcrop, however, is making the transparent image black rather than transparent.

Here is a jsfiddle http://jsfiddle.net/andieje/rvTmX/

This is the html

         <img id="cropbox" src="http://deepliquid.com/projects/Jcrop/demos/demo_files/sago.jpg" style="position: absolute; left: 0px: right: 0px;" />
<img id="transparent" src="http://www.golivetutor.com/download/spacer.gif" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px;"/>

This just shows a transparent image linked to jcrop and how it becomes black.

Is there any way I could work around this? I dont know much css but I'm not bothered if the modifcation means that the unselected area of the image isn't greyed out anymore - I just want the bounded rectangle around the selected bit.

thanks very much for any help you can give

Answer 1

That is because the default option for bgColor in jCrop is set to 'black'.

Just add the option for bgColor in your init to be nothing and your image will be transparent:

 $('#transparent').Jcrop({
    onChange: showCoords,
    bgColor: ''
},function(){
    jcrop_api = this;
});

Answer 2

Here is the solution (link). I changed the image to a div with transparent color by using rgba(0,0,0,0). Let me know if this is what you are trying to achieve.

<div id="transparent" style="width: 100px; height: 100px;position: absolute; left: 0px: right: 0px; background: rgba(0,0,0,0);"/>