Welcome to the MacNN Forums.

badtz · Oct 7, 2003, 11:25 PM

http://www.k10k.net/

Does anyone know how this site created the top menu bar [front, issues, news, specials, store] ....? At first I thought it was flash, but it's not ......

??

James L · Oct 8, 2003, 01:36 AM

Hey,

I just took a quick look, and it isn't Flash. I didn't look to see how they did it, but it would be easy enough to do with simple JavaScript rollovers.

For the buttons, they have that funky animation where the orange colour opens up from the middle of the button when the mouse is over. This would be easily created by using one image for the regular button, then an animated GIF for the rollover image.

It would be easy enough to create the regular button in Photoshop, save it, then import it to imageReady and create the orange animation. Then save it as an animated GIF.

That might even be what they did. If you view the page in Safari, click on a button, don't let go, and drag. You will see the 8 frames of the animated GIF.

For the text, same idea. Initially place a black GIF in the spot where the text is, then swap other GIFS that have the text in them into that spot as the mouse over occurs.

So, ,basically for each button you would have 4 images... the regular button, the animated GIF button for the rollover effect, the blank Text GIF, and the GIF with the text.

THEN, all you need to do is to trigger the rollover with an onmouseover in the link. when the onmouseover occurs, two image swaps occur, on to show the animated GIF button instead of the regular button, and the other to show the appropriate text gif instead of the blank one.

An onmouseout would be used in the link to set the images back to normal.

There are other ways of creating this effect, but this is the easiest one.

Hope this helps!

badtz · 02:22 AM

for the "text" are you talking about the text that appears underneath the menu on mouseovers?

Also, do you have to actually write the code for the GIF to 'stop' the animation once it hits the end of the cycle? and no it in reverse when it's on mouseout?

ie. on the site, when you put the mouseover, it does the animation and stops when it's fully orange. But when you let the mouse off of it, it reverses the animation back to normal.

Is this done by the GIF or do you have to code that?

Is it legal to post snippets of the html code on this thread? As I found the code for that menubar?

btw : thanks a lot for the info.! I've tried this in the past , with somewhat of a success [though the GIFS I used were too large of an image, and it "lagged" my site]

Thanks again for taking a look and helping out!!! Much appreciated!

James L · Oct 8, 2003, 02:21 AM

Yes, that is the text that I am talking about. Basically, two things change when the rollover effect occurs, one is the button, the other is the text.

They are definitely changing the button image, but they may just be changing the text dynamically by naming it, then using a:

document.getElementById

to get the text and change it dynamically. This technique works, but isn't supported by older browsers.

The rollover effects shouldn't really lag at all... the button images should be well under 10K each, the animated GIFS a little bit bigger, and the text GIFS should be extremely small, like 2 or 3K.

Did you preload the images?

badtz · Oct 8, 2003, 02:24 AM

Reposting below your post, since i was editing while you posted

Also, do you have to actually write the code for the GIF to 'stop' the animation once it hits the end of the cycle? and do it in reverse when it's on mouseout?

ie. on the site, when you put the mouseover, it does the animation and stops when it's fully orange. But when you let the mouse off of it, it reverses the animation back to normal.

Is this done by the GIF or do you have to code that?

Is it legal to post snippets of the html code on this thread? As I found the code for that menubar?

ultra-V · Oct 8, 2003, 11:40 AM

I'm no coding expert, but based on the fact that they have the various frames in the rollover animation stacked in one file, they aren't using JavaScript to swap an animated GIF. They seem to be using a JavaScript function to scroll the image up 18 pixels at a time (peelup as they call it), and back down on rollout. If you open the nav frame in a window, then View Source, you will see a section titled MENU ANIMATION FUNCTIONS.

FYI, I just read about a way to use CSS to do this type of thing without JavaScript (via WDIK).

For the text swap below (and it is text, not an image) they are using a version of this as noted in their code.

James L · Oct 8, 2003, 12:01 PM

Yeah Ultra, I mentioned that they may just be changing the text dynamically.

The problem with using Javascript to do things like this is that 13% of ALL users on the web disable scripting. In this case it would be o.k. as the scripting is just adding the "eye candy", so to speak, for the navigation. If the navigation was completely dependant on the javascript though, 13% of your users would be unable to navigate their way through your site.

godzookie2k · Oct 11, 2003, 02:24 PM

yes, but you also have to look at target audience. percentile surfer stats never reflect target audience, so its a moving target. K10k's target audience are designer/developers who know what they are doing and likely have javascript enabled, as well as a current web browser, so backwards compatibility isn't really an issue. Just look at the size of the site itself, in dimensions, definately built for those with a 1024 resolution or higher.

James L · Oct 13, 2003, 10:31 PM

Hey,

I sort of agree. I just turned off Javascript in Safari and went back to the page in question... the buttons we are talking about don't even show up!

I agree that you can code to a target audience, but no site should have navigation dependant on Javascript. JS is a great addition to a site, but should not be the foundation on which it is based on.

...just one mans opinion.