CODEWITHSUNDEEP
javascriptjqueryhtmlimage
aswathy
aswathy

Reputation: 831

How to have a hidden image in a HTML program?

I'm making a program using HTML and javascript (with jQuery) that asks users a series of questions, and displays an image depending on their answers. I do not intend to make this program available online. It's just something I'll send to my friends, so they can download and try it from their computer.

The problem is, the image should not be accessible outside the program. Previously, I just put the images in the same folder, with the .html and .js files, and used drawImg() or the img tag. But here the images should only be seen in the program, and users should not be able to see it or open it from outside.

So how can I do this? Simply setting the property of images to hidden is not enough.

Upvotes: 0

Views: 101

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074276

If the images are small enough, you can use data: URIs for the images, which means you can embed them right there in the HTML, like this:

<img alt="star" src="data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

That works on all modern browsers. The text following data: is the MIME type of the image, a semicolon, and then the image data encoded in Base64. Just use style="display: none" on them, then when you want to reveal one of them, get the element for it and use theElement.style.display = "inline"; to show it. You can read up on data: URIs on CSS Tricks, which links to this converter and also this one.

Of course, if your friends are web-savvy, they can easily open the DOM inspector in the browser and reveal those images, but I'm assuming they'll play along nicely. :-)

Upvotes: 1

Related Questions