0

Summary: I have multiple drawings scanned as black and white and saved as png. I want to layer the drawing images in a web page so that the bottom layers are visible underneath the upper layers. Is it possible to dynamically modify the pngs with JavaScript/CSS so that the png backgrounds become transparent?

Why: I am taking up traditional animation. So far the only open source software I know that can superimpose image layers is pencil. However, its frame editor is hard to use. I imagine a solution involving JavaScript and the frame sequence written in csv is possible (and probably easier!).

gsmendoza
  • 1,394
  • 1
  • 13
  • 31
  • what u tried ? post your code – SivaRajini May 30 '13 at 03:59
  • could you please specify what you trying to achieve? sound like you just need to set css to opacity 0.5 but I'm not sure if it fits in your case – xhallix May 30 '13 at 04:01
  • @ChristophHa, I have three sets of images: head, eyes, mouth. IThey were scanned as black and white images and converted to png files. However, I didn't edit the images to – gsmendoza May 30 '13 at 04:08
  • Oops, sorry about that. @ChristophHa, I have three sets of images: head, eyes, mouth. I'll use them to animate a lip sync sequence. They were scanned as black and white images and converted to png. I want to animate them using JavaScript, but I'm not sure if the head, eyes, and mouth images will superimpose if I layer them in html. I don't know if I have to manually make the backgrounds of the images transparent with Gimp or Photoshop. If this can be done dynamically with JavaScript, great. However, with regard to Siva Rajini's comment, I'm not sure where to start. – gsmendoza May 30 '13 at 04:14
  • did you try to change css opacity for each image? – xhallix May 30 '13 at 04:14
  • @ChristophHa: ok, I'll try that first then update you :) – gsmendoza May 30 '13 at 04:15

1 Answers1

0

There are two ways I would do it:

CSS way: element{ opacity: 0.5 }

JS way:

function transparent(){

var img = document.getElementById('id');
img.style.opacity = "0.5";

};
transparent();
xhallix
  • 2,919
  • 5
  • 37
  • 55