New Member - Question about how to a specific design...

I'm doing a website for my friend's guitar store. The concept is, he wants to have an amplifier and for the mesh of that amplifier to be the content part. We'd have a navigation bar at the the top consisting of knobs...as each link was clicked the mesh would fade or some other effect, and content would be seen. I'm just wondering how to get that result. Many have said jquery, but all i see is sliders where where there isn't any navigation, but arrows.

Any help would be great...
Here's a link to a large jpg i have at the site
algiersmusicpoint.com

jQuery, or most of the other JavaScript frameworks out there, are the way to go for this. I would suggest that you forget about looking for a ready-built script to do this, as you will most likely not find something to do what you want it to. With ideas like this it's normally better to do it all yourself so you know how it works and you can make it do exactly what you want it to. Just read up on the different events that you will need ('click' is probably the biggest one) and then the effects like fadeIn and fadeOut.

I do have one suggestion though... I'd set up the navigation so that individual pages are loaded like normal rather then using a fade in/fade out system. I say this so that you will have separate pages for each area rather then just one big page for everything. This is important from an SEO point of view, and lets your site have it's content seen correctly rather then as just one big page.

Best way to get it is to put a narrow image that looks like the area of an amp BEHIND the knobs. Give it a thick black border, if you can't generate the thing just like it should be. That should go all the way across.
Then, have a repeat background that is a 300x300 (or something medium sized) image of mesh to get the area in front of the speakers just right.

as for the knobs...Place images absolutely positioned OVER the top image (being sure the top image is in a DIV which is positioned relatively) OR make the whole thing together.
IF you are not comfortable with JS, a CSS hover will do almost just as well.
REALLY like the idea, btw. best of luck with it.

I know this is kind of old, but I was reading the post, followed his link, and looked to see where the OP decided to go with the advice.

My $.o2 cents?

Put your CSS on an external CSS sheet and then just link over to it.

perhaps for each one of the pages which a user will click on, you can have PHP just grab the content and just "Switch" the content when the user clicks the corresponding page.

Good luck on your quest.

I'd also suggest optimizing the image of the amplifier, that file is HUGE and takes forever to download. People will not wait for it to load.

Size the image appropriately and then optimize it.

Some resources to help you understand PNG optimization.

Clevel PNG Optimization Techniques
Optimizing PNG for Web
5-Minute PNG Optimization

In addition, I would set the amp to be the background of the content area and then add the content information as text rather than have multiple images to display your text.

This will help with SEO and general load times as you will use only one image.

CSS Background

Ha. Sound advice! (pun?)

Be that as it may, that's where I was going with that when I mentioned the php switch. Figured he would have the amp appear on index.php and only the "content" (text) would switch when the tabs were clicked. nice. We are both on the same sheet of music, (pun again?LoL). Thanks for clarifying where I lacked on explaining to the OP.