I’ve written a program called PicInHTML, which makes web pages with concealed images which are shown when text on the page is selected. What’s clever about these page are how they work: they’re a single file, with no dependence on images nor Javascript, and they work by leveraging the little-used ::selected CSS selector. Each individual letter on the page is given a CSS class to associate it with the colour of a corresponding pixel in the source image, and selecting the text changes the background colour to that pixel colour.
That’s a wordy way of putting it. Let’s try an example:
Give it a go on any of the following pages. You’ll need to not be using Microsoft Internet Explorer, I’m afraid, as it doesn’t support the ::selected CSS selector. All you have to do is select the text on the page to reveal the secret image!
If you’re interested in the mechanics of how it works, or you’d like to get a copy of the source code and have a play yourself, see my project page on PicInHTML. You could also try looking at the source code of any of the pages, above: they’re not too-hard to read, especially for machine-generated code.
T