Log in

View Full Version : Help with Creating Mouseover Tabs


cristywisty
03-24-2009, 02:08 AM
1) Script Title: Mouseover Tabs

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

3) Describe problem: I just dont get it :confused:! I have other dd scripts but this one just doesnt make any sense to me.

This is what I want to accomplish: I would like to have 3 tabs equally spaced and centered on my home page. I would prefer the tabs have rounded corners. The tab that is active would be white... other 2 tabs while inactive would be purple. One tab would have my new arrivals, one tab would have sale items, one would have company info.

These are the instructions:
Step 1: Add the below code to the HEAD section of your page ~DID THIS

This code references two required external files, which you can download below:mouseovertabs.js mouseovertabs.css
~ WHERE DO I DOWNLOAD THEM TO? DO I NEED TO SAVE THEM IN A SPECIAL FOLDER ON MY SERVER? DO I NEED TO EXTRACT BEFORE DOWNLOAD?

Step 3: Add the following sample HTML to the BODY of your page, which contains one instance of a Mouseover Tabs Menu: ~ IS THIS THE BODY OF THE PAGE WHERE I WANT IT DISPLAYED? I USE PROSTORES AND THERE IS A <BODY> TAG ON MY HEADER TEMPLATE AS WELL.

which contains one instance of a Mouseover Tabs Menu: ~ WHERE DO I GET THE MOUSEOVER TABS MENU? IS ONE OF THE FILES THAT I DOWNLOADED ALREADY?

Is there an easier code to do what I want?

Thank in advance for any help or direction.

~Cristy
ddadmin
03-24-2009, 04:37 AM
To answer your questions:

For Step 1, the two external files should just be saved (right click, and select "Save As") to the same directory as where your page is. These are not zip files, so no need to further extract.

For Step 3, the code should basically be added where you want the menu to appear on your page. For example, if that's directly below a certain image, add the code below that image's HTML.

You may also want to check out: http://www.dynamicdrive.com/dynamicindex1/ddtabmenu.htm
cristywisty
03-26-2009, 04:30 AM
ok.. still having problems. I dont host my own website, so I had to ftp it to my server which I did. When I added the code where I wanted it all i got was bulleted links.

So I tried the other script recommended and got the tabs to show up but now I am starting to wonder if these are really the type of scripts I need to do what I want. I dont want the sub menu to have links drop down in the box. I want to have actual information or products with images apper in the box. I dont want the tab to be a link that goes off to another page.

So the first tab would be called "whats new" and when you roll over or click the tab it opens up/down and shows 5 of my featured products with images and descriptions. I dont want to go to another page or give a bunch of links that will go to another page.

Tab 2 would do the same thing, just have differnt items showcased

Tab 3 would have my "about us"information...so no links anywhere

Am I looking at the right script for my needs? If so, please advise what step I am missing to accomplish what I want.

Thanks ~ Cristy