January 6th, 2012, 06:33 PM
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
January 8th, 2012, 07:32 PM
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.
Comments on this post
January 13th, 2012, 12:21 PM
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.
January 31st, 2012, 10:45 AM
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.
January 31st, 2012, 02:12 PM
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.
January 31st, 2012, 10:51 PM
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.
Comments on this post