“Where was I” Femto-episode 4.1

Just a tiny bonus update and a test of a trick I’m trying to do…

Published by

Epicanis

The Author is (currently) an autodidactic student of Industrial and Environmental microbiology, who is sick of people assuming all microbiology should be medical in nature, and who would really like to be allowed to go to graduate school one of these days now that he's finished his BS in Microbiology (with a bonus AS in Chemistry). He also enjoys exploring the Big Room (the one with the really high blue ceiling and big light that tracks from one side to the other every day) and looking at its contents from unusual mental angles.

3 thoughts on ““Where was I” Femto-episode 4.1”

  1. The ‘do not approach wolves from behind’ only shows up on IE if I put my mouse over the image. I haven’t tried it in FireFox yet, I’ll do that when I get to work and let you know.

  2. Better in FireFox – the original picture stays. (The point I was trying to make was that the original picture disappeared and ALL I saw was your “do not approach wolves” and hand-drawn circle, but it’s impossible for me to think straight at 5:30 in the morning.)

  3. Well, I said it wouldn’t work in IE versions (prior to 7, at least) 🙂

    Internet Exploder for many years has ignored the bug in their PNG rendering. The “transparent” portions show up as “background color” instead so it ends up covering up whatever’s behind it, unlike every other (graphic) browser which seems to properly handle Portable Network Graphics.

    There is actually a way around it – if you make the .png “indexed” like an obsolete .gif it apparently works – but then you get ugly jagged lines instead of nice anti-aliased lines and text.

    Especially now that IE 7 is out, I see absolutely no excuse to not just code to the standards as best I can rather than wasting time trying to hack around problems in broken Microsoft browsers…

    If you’re curious, what I did was put two images the same size atop one another. One is the actual picture, the other is a tiny transparent .png which only has the overlay text (and little circle and such).

    Both are positioned “absolutely” inside the <div> tag so they’re both in the same place. The z-index for the picture is “2”. The z-index for the overlay is initially 1, but when you mouse-over the main picture, it changes the transparent overlay’s z-index to 3 so it shows up on top. “onmouseout” for the overlay sets the z-index back to one, so it disappears “behind” the picture again when you move the mouse away.

    Can’t do stuff like that on LJ.

Leave a Reply