Hiding In Plain “Site”

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:

An example of a special page - selecting the text in this page reveals the Reddit alien. Click on the image to see the discussion about this example on Reddit.

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.

!

An example of a special page - selecting the text in this page reveals the Reddit alien. Click on the image to see the discussion about this example on Reddit.

T

1 reply to Hiding In Plain “Site”

  1. So cool! Next time I have a free minute I’m definitely going to have a play.

    Although why you included a picture of that ugly girl is beyond me…

Comments are closed.