How can I duplicate this technique?

August 2, 2006 9:49 AM

How is this web technique done and do you know of other examples of it? Is

There's a neat design tenchnique over at http://www.telltalegames.com/samandmax.

If you click on the ComicCon icon (Green square with eye), you'll see that there are pictures. As you mouse over each picture, it's highlighted and if you click on it you're taken directly to the picture.

1. How is this done? It looks like it's tables and javascript, but i'm not sure. I'm guessing you'd need to build the layout in photoshop and then definte regions of clickability and what actions to do after clicking. So is this all photoshop or photoshop and flash or something else?

2. Could this effect be easily duplicated with a blog portfolio or web gallery software, so that the new images are automatically added to the layout as you add them to your blog, replacing older pics?

3. Would the work to do this be insane, i.e. time consuming with lots of tricky handwritten code?

4. Do you know of any portfolio sites that use this technique?

posted by Brandon Blatcher to media & arts (19 comments total)

It's Shockwave, not plain old HTML, Javascript.

(http://www.telltalegames.com/images/products/snm/flash/snmActivityCenter.swf)

To duplicate this you'd have to... well, learn Shockwave.
posted by Krrrlson at 9:54 AM on August 2, 2006

If you right-click, you'll notice it is a Flash movie.

You would use a Flash editor like Adobe Flash Professional to create the "mouseover" ActionScript effects.
posted by Blazecock Pileon at 9:54 AM on August 2, 2006

It's a flash control, although I see no reason why it couldn't be done in javascript. The overlapping layers would make it difficult, though.
posted by justkevin at 9:56 AM on August 2, 2006

And by Shockwave, I of course mean Flash. Sorry, brain lag.
posted by Krrrlson at 9:56 AM on August 2, 2006

It's Flash.
posted by bricoleur at 9:57 AM on August 2, 2006

On that site it's done with Flash. It could be done in HTML + JavaScript, though not as easily. It would take substantially more effort to do it without Flash.

How easy it is for you depends, I suppose, on how comfortable you are with Flash.
posted by Khalad at 9:58 AM on August 2, 2006

Wow, that was fast. I took all of 20 seconds and BLAM.
posted by bricoleur at 9:58 AM on August 2, 2006

Oops, no, more like 3 minutes. Time flies...
posted by bricoleur at 9:59 AM on August 2, 2006

It's done in Flash. A good way to test if something is done in Flash is to right-click it, if you're presented with a menu different than when you right-click a photo, namely the first options are Zoom In and Zoom Out, it's Flash. One possible way this is done is each picture is a button object, with a roll-over state being a white box set to a low opacity. When you click on the button, the picture is shown by requesting the picture's URL, nothing too technical about that.

In regards to whether new images could automatically be put in, I'm not too sure. In my method it would require replacing the button's pictures, and I don't know if you can do that dynamically. There's probably a way of doing it with Flash, but to be honest I'd just do it in HTML.
posted by Meagan at 10:00 AM on August 2, 2006

A List Apart's article on CSS Sprites has one neat way to do this with HTML/CSS (example).

If you want the clickable areas to be irregularly shaped or oriented (like the ones in that example, or on the site you linked), you will need to do some work in Photoshop or GIMP to position them by hand in the arrangement you want. You could write a script to add new images in random positions, but this would probably require some custom programming.
posted by mbrubeck at 10:09 AM on August 2, 2006

Maybe - just maybe - it could be replicated with HTML and CSS only.

Check this place for related techniques (Demos - Photogalleries)

http://www.cssplay.co.uk/index.html
posted by magullo at 10:10 AM on August 2, 2006

Yeah, you should be able to do it all with HTML and CSS only... BUT, it wouldn't work correctly in IE without some javascript (IE doesn't like :hover selectors)

The overlapping wouldn't be a problem, but the wierd angle of the pictures would be...
posted by hatsix at 10:22 AM on August 2, 2006

Thanks all, especially the cssplay link, that was totally cool.


Another question: Is there any good reason to do it in Flash or CSS? I'm not partial to either per se, but would use a particular method be better in some way?
posted by Brandon Blatcher at 11:25 AM on August 2, 2006

CSS + Javascript is the "right" way to do it if'n you're a snob like me. Flash will cost you and sends you down the proprietary software trail. It will also have much wider support.

It's the time-honoured Web Conundrum, whether t'is better to be expedient or correct and the answer is dictated by whether the designer owes allegence to the geek or marketing clans.
posted by Fezboy! at 1:05 PM on August 2, 2006

CSS + Javascript is the "right" way to do it if'n you're a snob like me. Flash will cost you and sends you down the proprietary software trail. It will also have much wider support.

Yeah, but isn't Flash like Photoshop these days i.e. the defacto standard for that type of thing? Sure it costs, but it might be worth it and the cost is easily taken care of by one or two freelance jobs. As for support vs CSS/Javascipt, are you overblowing things 'cause you're a snob :)? Every browser made recently has shipped with Flash for years or has a plug-in and anyone looking at a desigh or photo portfolio probably already has it installed, right?
posted by Brandon Blatcher at 1:11 PM on August 2, 2006

The mouseover effects could be accomplished with photoshop, javascript and css fairly easily. As far as dynamically displaying the pictures, that would be quite a bit more difficult. I believe it could be accomplished with php scripts which can dynamically create images based on the contents of other images. However, this seems like a pretty daunting task, and IAAWD.
posted by anomie at 1:52 PM on August 2, 2006

A good way to test if something is done in Flash

...is to have your Firefox browser updated with the Flashblock extension. It really is vital these days.
posted by Rash at 2:32 PM on August 2, 2006

I'm with Brandon: whilst JS+CSS might be the "correct" way to do it, Flash would actually be the best bet for maximum cross-browser compatibility. I'm sure I could think of a way to implement it in JS but it would require a load of hacks for IE and would probably still break in IE5 Mac. Do it in Flash. Or simplify the problem massively by making all the photos aligned to the horizontal and not overlapping.

Of course, if someone wants to prove me wrong... :)
posted by blag at 7:22 PM on August 2, 2006

Maybe they don't use the exact effect you liked with that site, but there are free Flash gallery setups where you can load the images into a directory or specify the list with an XML file.

I'd link you to SimpleViewer which we've used before, only the site seems to be down.
posted by AmbroseChapel at 11:33 PM on August 2, 2006