HOWTO make image disappear when it is selected(in InternetExplorer browsers)

[SensoVision]

Some days ago member of this forum donecweb, show me picture with very interesting effect , when you open this image in IE browser and select it with the mouse part of the image just disappear and invisible part of the image become visible. After close examination I've find out how this is achieved and decide to share it with others.
here is small demo image of what you could get in result, just open this page with IE(from Windows OS, if you run IE through Wine as I do, it wouldn't work because Linux select things in a different manner).

this eye is just example, to demonstrate how it works. use your imagination and you'll be able to get much more interesting images, the only thing you need to remember that to achieve best effect it's better to use two same images with different elements which isn't presented on the one image, this way you would be able to blend images so hidden one wouldn't be very visible.
so do you like this effect?  if so let's proceed.

To achieve such effect you'll need some image editor like GIMP or PhotoShop, you can actually use any image processing program like Corel Photo Paint, Paint Shop Pro or any other imaging program which would let you to work with layers and selections. Since my OS is Linux I'm using GIMP for editing purposes, and this image would be made with it as well.

1. First you need to obtain grid which is used to select images in IE browser, you may do this by opening clear white picture, after you do this select this image and just hit print screen, after this just save it as TIFF, PNG or other image format which doesn't loose image information, don't use JPEG as it would smooth edges of the grid and this is totally not acceptable in our situation.
If you don't have a browser with you or just lazy to get this picture, feel free to use one used by me it's already have white regions made transparent. so you can skip few actions.


2. On the next step you'll need to make white spaces on this greed to be transparent, to do this open your file with grid in image editor and Zoom it so you can clearly see white and black squares. Now you need to choose tool "Select by color" and apply it on the white spaces. If you're in GIMP just hit Shift+O and this would active tool, after this just hit on white square and you'll see all white squares to be selected.
you can check this picture to see how it's should look like: http://forum.weblamp.net/HOWTO/Screenshot-1.jpg
Once you selected all white parts of the grid just clear them by CTRL+K or Edit -> Clear

3. Now let's put this all together. File>Open as a Layer or simply hit CTRL+ALT+O and choose eye.jpg


Since I'm going to draw "cat eye" over my own eye I need to create empty layer between grid.png and eye.jpg
If you don't see layers hit Dialogs -> Layers or CTRL+L this would bring Layers box, which currently should look like this:


If you're wish to use other image instead of drawing something just upload it instead of creating empty layer, than just cut selected regions(where previously was white squares) and you'll be ready to see result if make greed layer visible.

4. Check if you still have selection of the places where was white squares. if not, just select them again and hide grid.png layer. Make middle layer active and go to View -> Show Selection or hit CTRL+T in order to hide selection marks so you can see picture more clearly.
Now you're ready to paint, just select brush or other tool and try to paint something. Please note that if you enlarge image which you paint would look dotted, it's because you're painting over selection and only spaces where was white squares are filled with color.
BTW here is image you can use if you're lazy, it's copy of my middle layer:


if you would like to see how picture would look in IE just make grid.png layer visible for the moment and you'll get idea what image would looks like in browser.

5.Once you finished with drawing, you could experiment with transparency of middle and bottom layer in order to blend them better. When you'll be satisfied with results you'll need to save your final picture to file, just don't choose JPEG compression(PNG or GIF would work) otherwise picture wouldn't work like it should.(before saving don't forget to make grid.png layer invisible).

Seems I've told everything I know, hope this tutorial would be helpful to someone. If you find it helpful I'll appreciate if you share pictures made using this methods here

Comments and suggestions are very welcome!

[Queen Bee]

Awesome! Very interesting...

[SensoVision]

Rachel, I'm sure you could come out with something much better than I did

[Queen Bee]

I'm going to have to do this for fun sometime...

[SensoVision]

just don't forget to share it with us I'll be waiting for it.

[donecweb]

Thanks for the tutorial Denis. I tried it and with PSP I could not use color to select all the black squares and I tried several settings it either selected all the picture or just one little square. So I tried GIMP and it selected it but when I pasted it the image took on a moving effect of white and black lines diagonally switching places but there was just a second before this happen that I saw it work so I will just need to mess with it some. BTW would it be acceptable to place a copy of your tutorial on my site with a link to your site and if so what page would you like me to use?

DonEc

[SensoVision]

Sorry about PSP, I didn't work with it for ages so don't even remeber what tools it had BTW you should select white squares rather than black ones(if you used image provided on this site than white squares is already deleted and spaces on thjeir places are transparent.

If I understand you correctly it could be that grid layer is shifted a bit, if you used pictures provided here it shouldn't be happen(of course if you didn't move any layers or croped them). If you generate your IE grid just try to use image from the top pixels, this way you'll be sure that your image would look correctly both in image editor and browser and you won't need to crop it to match browser.

sure I never mind to distribute things I wrote, the only thing I asked for, is a link to original post, so feel free to make a copy(even a full one if you like) and put it on your site. Actually I would appreciate if you do this since it could bring us a bit more visitors

[donecweb]

Would you like the link to be to the forum or somewhere else and if the forum what page?

I had tried the use of your example and I tried to select the black color because it was the only color. Also I don't know of a way to select a color other than clicking on it with the selector in either program. I would like to be able to just select all the parts with say a certain #000000 code, but I've never seen this. I did not crop the image or even move it. I also have not gotten back to it.

DonEc

[SensoVision]

as for selecting by hex code of color I don't think that it's possible, at least not in GIMP. As for linking, feel free to put URL to any page you'd like whenver it some post or main page of our community .

BTW I've attached file with GIMP project so you can review it with layers and so on. http://forum.weblamp.net/HOWTO/eye.xcf.rar

[donecweb]

Thanks Denis

DonEc

[Queen Bee]

I told you I would get around to it! 
See my amazing Warrior Hamster in IE:

[SensoVision]

nice idea Rachel! your warrior is cool I'm glad that my howto was useful, hope that we'll see more images like this in future.
Just wonder is it your hamster?

[Queen Bee]

He is a cutie, but he's just a stock photography hamster... I can't claim him.
I think it would be funny to put a few more small rodents into super outfits.