How'd they do that?

January 24, 2006 2:11 PM

Curious as to how this effect is done?

Note the post it note with the thumbtack. It's a neat effect and not nearly as annoying as the pop-ups that come up in a new window. I know it's javascript. I typically hate pop ups but I can see where this type of script would be helpful with some projects I'm involved in. I'm not looking to hack their script or anything, but it would be great if somone knew of some freeware similar.

posted by j.p. Hung to computers & internet (20 comments total)

It's a javascript effect from instantattention.com. They charge $10/month to use their script. I don't know of a free alternative.
posted by ewagoner at 2:18 PM on January 24, 2006

Yeah, I don't mind a one time fee for scripts but the idea of paying over and over for it isn't working for me.
posted by j.p. Hung at 2:19 PM on January 24, 2006

I see they have a $97/year option, too. But still, yeah, pay over and over.
posted by ewagoner at 2:21 PM on January 24, 2006

Not hard to do with flash. There is a setting to make the flash object transparent.

Of course, I'm not sure if you have access to flash.
posted by meta87 at 2:27 PM on January 24, 2006

Very likely the graphic is a transparent PNG in a div (or some other block-level element) that's being dynamically added via the aforementioned script. Clickng the "x" removes the element.

See here for open-source tools that would allow you, with experimentation, to achieve the same thing.
posted by eustacescrubb at 2:29 PM on January 24, 2006

< !-- browser detective - protected source code -->
< !-- your ip address is being logged! -->

Oh noes! Anyway, I'll bet you could tweak this free script to have no borders and set it to contain a "hand-written note" image and so forth.
posted by milquetoast at 2:32 PM on January 24, 2006

For those thinking of getting this, Firefox's AdBlock's "FilterSet-G" seems to block instantattention.com scripts by default. I had to run explorer just to see this.
posted by orthogonality at 2:44 PM on January 24, 2006

fyi...you can view the source by saving the page and viewing locally.

Search for the "onload" statements.
posted by zerokey at 2:46 PM on January 24, 2006

You can see proof of what eustace is saying by doing a select-all while on the page, at least in Firefox. It selects a MUCH bigger box than the image itself. One that's 399x479, in fact.

If you open the DOM inspector in Firefox you can see that this is in a DIV distinct from the main body of the page, with an id of the name __phd. There seems like a lot of overkill in there to me, but then this isn't my specialty. It would seem the closing handler is just done by a straightforward imagemap.
posted by phearlez at 2:48 PM on January 24, 2006

Can't this just be done with a z-layer css script? On click make the image hidden, no?
posted by You Should See the Other Guy at 3:12 PM on January 24, 2006

orthogonality: FYI, you can disable adblock with a right-click on the status bar icon, or ctrl-shift-B (apparently, although that doesn't seem to do anything for me). Easier than starting a new browser, at least.
posted by mendel at 3:48 PM on January 24, 2006

Working for a few advertising agencies in the D/FW area, I have made several of these in Flash. As noted above, Flash has an export setting to make the background invisible. Then stick your movie on a DIV tag or such as that, and presto!

YSSTOG is also correct - some handy CSS/JavaScript can also manage the same sort of effect without the use of Flash. The only larger problem there (with this particular effect) is the presence of the transparent shadow. Without the transparency that Flash allows, you would have to dither a solid shadow with a pattern of transparent pixels. Pain in the ass.
posted by kaseijin at 4:10 PM on January 24, 2006

Addendum - you'd have to dither if your image was a GIF... a PNG would achieve the look without the dither, as eustacescrubb noted. Forgot about the PNGs....
posted by kaseijin at 4:14 PM on January 24, 2006

wow, my head is going to explode. Thanks much, great suggestions and some good places to start!

thanks again!!
posted by j.p. Hung at 4:14 PM on January 24, 2006

Hey kaseijin, I get the flash thing but will the DIV tag allow you to have this, essentially "floating" over an html page? I didn't know you could do that with Flash, I just assumed flash had to run in a Flash environment.
posted by j.p. Hung at 4:24 PM on January 24, 2006

Yeah, there doesn't appear to be a lot going on here to be top-secret protected JavaScript, or cause major pain to write for anyone who knows JS more than a teeny.

Here's a quick mock-up of a 1.5 second delayed load image that does about the same thing you want. The display: none and position: absolute styles let the page text flow without interruption; the HTML area maps setup the hotspot; and the javascript code handles the display. If you look at the page source, the whole thing to manage the effect is in the first 40 lines, and that can be crunched way down by any competent JS programmer. (Ignore the image quality, my drawing talent never grew beyond the 8-year-old with crayons stage.) And there are probably 15 other ways to do this.
posted by mdevore at 4:31 PM on January 24, 2006

I just made something similar today-- it's a div that is positioned absolutely and given a z-index to sit above the rest of the page. I added some javascript to govern its visibility-- onclick of one image in it (a little X, naturally) it closes. Do a google search for "show hide layers".
posted by Mayor Curley at 5:42 PM on January 24, 2006

I worked on this web site in a previous job as a web developer. Click on "see details" in the image for similar functionality. View source to see the code. To get a cool drop-shadow like your example site, just make the popup image a PNG with an alpha channel. (You might need to use special tricks to get the PNG to display correctly in IE6 and earlier.)
posted by mbrubeck at 8:46 PM on January 24, 2006

A similar effect can be seen on malevolent's site (MeFite, long time no seen).
posted by stavrosthewonderchicken at 10:24 PM on January 24, 2006

j.p. -- Yeah, you can indeed embed Flash into a css layer, but you do run into browser issues. If I recall correctly, it seems like IE will accept it, but Netscape/Mozilla will not? This is why many of the "interruptors" don't show up on Net/Moz.

That method (while working for the majority of consumers) is pretty old school. With the advertising/marketing industry getting more and more specialized and vendor-based, we're no longer expected to be one-man production shops handling everything from concept to execution. These days more often than not, I will be asked to either design or build the Flash component and then hand it off to some other vendor who will actually place it on the page -- and who knows what tricks they use. I did do one as recently as last year, though, for Iams pet foods that used the old div trick.
posted by kaseijin at 3:24 PM on January 25, 2006