If you've looked at my site and scrolled over any of the links, you've probably noticed that a popup comes up (well in IE it does any way, if you have javascript turned on).  So maybe you haven't seen it, but if you have you'll notice that it's a service by Snap. You add in their javascript and they'll automatically add a contextual popup (usually an image of the site) for each link. Depending on your view, this is either very annoying or fantastic.  The main issue with the service that Snap provides is it can't view an internal website. So what can you do if you want to have the same functionality on an intranet?

In a recent post, I mentioned how to take a screenshot of a web page on the fly and convert it to a PDF. We can use the same code (so go download it), to create a similar functionality to the one Snap provides.

LinkVisualizerExtender.zip (3.04 kb)

The zip file above contains two items. The first is an extender. This extender simply takes a div as input and will attach itself to every link inside that div (mouseover and mouseout events). When the mouseover event is fired, it positions a div underneath the link, and calls a handler (the second item in the zip file) to load an image. The handler is called PageToImage. This item takes in a max size for the resulting image and a URL which you want to change into an image. This handler uses the code from the other post to get the screenshot, so you'll need it as well.

Please note that this is very basic example and was intended more as a proof of concept than anything. I'd definately add a div as a secondary target that would hold the image of the link (so I could format it however I wanted), add a property to define the size of the image (at present it's static at a max size of 500 pixels), maybe another property to define where I wanted to place the item (top, bottom, left, etc.), and maybe some sort of animation if you really want. None of that would be too difficult to add really.

The handler also needs to be changed as it doesn't know where you want to place the images (there's a FolderName string object that needs to be filled in). Other than that though, it works fine (even caches the item on the client side as well as on the server). The only thing I might add there is some code to have the server side cached item die off after X number of days. That would be it though.

Anyway, download the code, try it out, and happy coding.

I have to say that this is an interesting turn of events. Apparently jQuery will be shipping with Visual Studio from now on, adding intellisense, etc... I guess I'll be switching from prototype/scriptaculous... Maybe not. Anyway, figured you'd find the post on Scott Guthrie's site interesting (although if you aren't reading it already, I'd be a bit shocked). Also, I should have a couple bits of code coming up here this week (I promise this will be the only boring codeless post).

Who knew? Although, not in the same form as they were in years past, but still. Actually I didn't even know that Delphi was still around for that matter. I'm going to take a look at it but I don't think it will replace Eclipse for my PHP/Ruby work... There's always hope though.