View Full Version : New site layout, help me?

01-21-2011, 08:46 PM
I'm usually pretty good with finding codes on my own,
but it's been a while and I'm pretty stumped.

I am currently working on a new site, and making a new layout.
So on Photoshop, I laid out how I want it to work:

This is how it will look:

Each section of the header, like each color/shape, will be a separate imagemap.
When it is hovered upon, An arrow will move out of the color/shape, and then whatever the link will lead to will appear at the end:
And when the arrow is taken off of it, it will retract back to the color/shape, not just disappear.
And here's a picture of all the arrows out:

Is this possible?
And is it possible that the bar&arrow that come out to also be clickable?
And the text at the end to be clickable text and not just an image?

Any tutorials/website links are welcome, I can usually follow them pretty well.
Sorry to bombard you, I just figured I'd ask everything I wanted to in one thread.

Old Pedant
01-21-2011, 09:07 PM
Of course it is possible.

You might find it easier to do this with Flash than with JS and images, but yes, it could be done. But it's not something you are going to do with zero JS experience to build on in less than a few days. Or maybe even a couple of weeks.

I can see at least one way to do this, right now. I'm sure there are others.

I'd just use a separate image for each "slider" and use clipping to hide the part you don't want seen. Sliding it out and then back in--and clicking on it--are all pretty easy. It's the clipping that will take some forethought.

01-21-2011, 09:15 PM
I've been googling my fingers off,
and I think I've found things along the lines of what you've said.
Thanks alot! It's good to hear that it is possible,
because I didn't want to start if there wasn't any way to do it,
haha. :D

Old Pedant
01-21-2011, 09:30 PM
Look up "clip" or "clipping rectangle" as it applies to CSS and JS.

Oh...just remembered I have a demo of using one:

Stay at the top of the page and wait maybe 10 to 20 seconds. A little guy ("Art") will pop up. That's done basically the same way as what you want: An image that is moved and, until the entire image is moved all they way up, clipped to only show the part above the line it is sitting on. (In other words, it works fine just sitting on a line, doesn't need an image to hide behind.)

You'd do essentially the same thing, but move the image horizontally, using clipping to hide what you don't want seen.

01-21-2011, 11:44 PM
The way I'd probably go about this would be to use an image just for the head of the arrow, and put it and another plain div with the right height and matching background color (for the body of the arrow) inside a container, and float them right.

Then I'd position the right border of that container in a way that, when setting the width of the arrow body to 0, the arrow head perfectly blends in with the colored area and will be invisible.

Then, animating the width of the arrow body should give the desired effect.