Magical css/javascript rollover?

January 17, 2007 10:45 AM

I want to make something similar to the navigation menu of Helldesign, as in 'image > click > new image' (obviously, without refreshing).

Sadly, I have no idea about javascript so the html source is of little help besides telling me that they are probably using script.aculo.us to do the effect.

Any help?

(PS: It hurts to use up my question like this but... it's javascript, evil javascript!)

posted by Memo to Computers & Internet (11 answers total)

This, or something else at the site will probably work. Or you could use Flash, but that's a whole other animal.
posted by JeremiahBritt at 10:55 AM on January 17, 2007

Response by poster: Here's what I want. Example animation.
posted by Memo at 11:19 AM on January 17, 2007

What about the javascript-free css demos at Stu Nicholls' CSS Play? This one for example? Lots more here.
posted by ceri richard at 11:39 AM on January 17, 2007

Response by poster: He abuses :hover. :(

I want the user to click in a thumbnail and load content in a different div without refreshing, changing the thumbnail to represent that it's the one 'active'.

The content loaded would have an image and text, including a link so I can't use something that requires to hover over the thumbnail.

I'll check if I can modify his code, but at the same time I would prefer a better solution.
posted by Memo at 11:59 AM on January 17, 2007

Ah. I'm sure it's do-able, just beyond my knowledge at the moment. But I'm working on it ;-)

I'm sure someone will be along soon with an answer but if not, it might be worth asking on a css list such as css-d or the SitePoint forum.
posted by ceri richard at 12:10 PM on January 17, 2007

Best answer: Script.auclo.us (which builds upon Prototype makes this somewhat easy to do. However, it is going to require SOME javascript in order to do it.

If you want to do it without the JS library, then you can do something like this:

&lt div id="contentArea"&gt Blah Blah < /div>br> &lt div id=navbar&gt
&lt img id="navImage" src="image1.gif" onclick="javascript:document.getElementById('contentArea').innerHTML='New Info'; document.navImage.src='images/image2.gif';"&gt
&lt/div&gt
&lt/div&gt
posted by stovenator at 12:30 PM on January 17, 2007

Response by poster: I don't really mind using javascript, the problem is that I don't know how to use it.
posted by Memo at 12:33 PM on January 17, 2007

ack... Well, I'd never tried posting html to metafilter.

It screwed that up completely. You should be able to get the jist of it, though. &lt should be the "less than" symbol. &gt the "greater than" symbol.
posted by stovenator at 12:35 PM on January 17, 2007

Response by poster: Yeah, I'm trying out the code, it seems to do the trick. :D
Thanks.

Any tip about using script.aculo.us (to make the same but uhm... prettier)?
posted by Memo at 12:39 PM on January 17, 2007

Well, the documentation kinda sucks on it. Scriptaculous basically allows you to do prettier effects, and takes care of a lot of browser compatibility issues for you.

Start with a decent tutorial , and go on from there.
posted by stovenator at 12:46 PM on January 17, 2007

It's called a carousel effect. Here's how to do it with prototype (and therefore scriptaculous), yui, and jQuery.
posted by tmcw at 5:44 PM on January 17, 2007