1

I have two images one that is black and white, another in colour. What I want to do is let the user drag the mouse over the top black and white image so that it reveals the colour version underneath.

I don't want to have to use Flash. Any ideas how this can be done in HTML 5 or Javascript?

Nathan
  • 79
  • 11
  • 4
    @sgonzalez I wouldn't say that. IE6 can run (some) JS well, but has absolutely no support for any HTML5 stuff. – Bojangles May 30 '12 at 21:15
  • Thankfully ie6 is slowly going away – John Kane May 30 '12 at 21:16
  • What's HTML5 more than Javascript? A few new elements? Care. Canvas, Audio, File, Drag n Drop etc are all JS. (It's all JS that IE won't understand though.) – Rudie May 30 '12 at 21:27
  • @Rudie Please tell me what HTML5 has to do with Javascript at all? HTML5 might be used as a buzzword to include a lot of CSS and JS featured. However, by definition, HTML5 is a markup language and certainly NOT javascript. See: http://www.w3.org/TR/html5/ – Steve May 30 '12 at 21:36
  • Sure HTML5 includes JS. What do you call the File API? It's not in V8 and it needs a DOM... I don't think CSS is part of HTML though. Not really the point though. All HTML5 is, is a few useless elements. I'm not playing anymore. – Rudie May 31 '12 at 17:44

3 Answers3

2

I haven't tried this, but it should work:

  1. Load the B&W image in a hidden IMG tag
  2. onLoad of IMG, draw its contents into a CANVAS object, using drawImage(). (the canvas is absolutely positioned on top of an IMG with the color image)
  3. Write javascript that erases pixels out of the canvas on mouse drag (i.e. sets their alphas to zero)

Note: canvas object is not natively supported in IE8 or earlier: http://en.wikipedia.org/wiki/Canvas_element#Support

georg
  • 211,518
  • 52
  • 313
  • 390
meetamit
  • 24,727
  • 9
  • 57
  • 68
  • Hi, this sounds perfect. I'm not a javascript coder, if you get chance I would really appreciate the code to make this work... I can manage the css without any problem. It's the canvas and erase pixels that's beyond me!! thank you. – Nathan May 31 '12 at 20:17
1

You might want to look at JQuery UI's Droppable plugin. Basically you can have 2 images be draggable and be droppable on one another, and once that happens, the third image can become visible.

Heres a JSFiddle example

Jason Kulatunga
  • 5,814
  • 1
  • 26
  • 50
0

I think I may have completely misread your question, so I've created a new answer with what I think you meant. If all you want is the b&w image to be hidden on mouse over, you can do something like this with jquery.

$('.BandWImage').hover(function(){
    $(this).fadeOut(100);
    $('.ColorImage').fadeIn(500);
});

The colorImage could have a style of: "display:none;" to start, and be placed behind the black and white image using CSS. Once you hover over the Black and White image, it will fade out, and the color image will fade in.

Jason Kulatunga
  • 5,814
  • 1
  • 26
  • 50