Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > Tab image help
electraoutlaw (Guild Admin) 5/29/2008 6:33 PM EST : RE: Tab image help
electraoutlaw
Posts: 1172
Zomgawsh Poster

Thank you Mottie!  A million times, thank you!

I've been trying to figure out how to get a roll over effect on my tabs for weeks, and here you are, swooping in to save me from my CSS newb woes!

Check out my site to see what you helped me do.
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

Mottie (MVP) 5/29/2008 8:00 PM EST : RE: Tab image help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

He he you're welcome! I am still an amateur at messing around with CSS and Javascript, but I try.. that's what counts right? LOL

Your site looks awesome! Hmmmm, I think I need to make a Sinner tab on my site too 
TopBottom

Mottie (MVP) 5/31/2008 4:37 AM EST : RE: Tab image help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


I know I'm probably being a pain in the butt now... but here is a slightly different way to get hover effects on your buttons. Very similar to my last method, but instead of changing the background color, this way changes the background image.

The "Selected Tab" images have the background filled in with a solid color. The "Unselected Tab" images have the same design but a transparent background. Hover over the second column to see the effect.

Selected Tab Unselected Tab

This method uses one image for the Selected button and three images for the Unselected.
Selected
home
button
(solid bkgd)
Unselected
home
button
(transparent)
Unselected
background
Hover
background

To make this work for your site:
1. Add the tab images as you would normally do.
Control Panel > Styles & Colors > Tab Bar Styles > Horizontal Tab Bar
then Style & Colors > Tab Images
Add the URL of your images here and then save
2. Now add this to your CSS (Styles & Colors > Custom StyleSheet)
Once again, addthe "table.TabBar" if you want your buttons all scrunched together. Addthe other two lines of CSS for the hover effect to work.
Custom StyleSheet
table.TabBar {
 border: 0;
 margin: 0 auto;
 padding: 0;
 width:100px;
}

td.Tab a img {
 background: #000 url(http://i259.photobucket.com/albums/hh311/hotwow/themes_old/border.png);
}

td.Tab a:hover img {
 background: #0000aa url(http://i259.photobucket.com/albums/hh311/hotwow/themes_old/hover.png);
}
That'sit!... (again  )

TopBottom

electraoutlaw (Guild Admin) 6/2/2008 3:50 AM EST : RE: Tab image help
electraoutlaw
Posts: 1172
Zomgawsh Poster

Haha- thanks Mottie!
I think I have finished my total website makeover.  Including the new and improved rollover tab buttons.  That is, until you come up with some other awesome thing that I can't resist.
No alternate text supplied.
COH (City of Heroes) Top Pinnacle SG- female supergroup
TopBottom

Mottie (MVP) 7/3/2008 7:02 PM EST : RE: Tab image help
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


YAY, I get to be a pain in the butt again!

Grace Diamond (in this thread) asked for a tab bar that is basically totally custom. And guess what? I figured out how to do it

With this custom tab bar you will need:
  1. A paid subscription site - so you can enter HTML and Javascript in the banner area
  2. Three images for every tab that you have on your site - they must all be the same size! (my test samples are below are all 100x100 pixels):

       
     Selected tabUnselected tab
    Mouseover tab

  3. The tabID of every tab on your site...
  • My Test Site Home page URL (the TabID is in orange):

    http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168223
  • This is where a slight limitation appears, if you have a tab that is only accessible to officers or site admins, you have to choose to either have it show for everyone or no one. I don't know enough about how guildportal sets the accessibility to display or not display tabs for members. But if you do display the tab and the person clicks on it without the security level, they will get an error.
Custom StyleSheet
table.TabBar {display:none;}
table.TabBar2 {
 border:0px;
 margin:5px;
 padding:5px;
 width:550px; /* adjust width of the custom tab bar here */
 margin-left:auto;
 margin-right:auto;
}

.Tab1Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/homes.gif) center center no-repeat; }
.Tab1UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/homeu.gif) center center no-repeat; }
.Tab1Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/homem.gif) center center no-repeat; }

.Tab2Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forumss.gif) center center no-repeat; }
.Tab2UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forumsu.gif) center center no-repeat; }
.Tab2Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forumsm.gif) center center no-repeat; }

.Tab3Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendars.gif) center center no-repeat; }
.Tab3UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendaru.gif) center center no-repeat; }
.Tab3Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendarm.gif) center center no-repeat; }

.Tab4Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/imagess.gif) center center no-repeat; }
.Tab4UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/imagesu.gif) center center no-repeat; }
.Tab4Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/imagesm.gif) center center no-repeat; }

.Tab5Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/miscs.gif) center center no-repeat; }
.Tab5UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/miscu.gif) center center no-repeat; }
.Tab5Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/miscm.gif) center center no-repeat; }
Banner Area
<script type="text/javascript">
var tabURL = new Array();

// Enter only the TabID for each tab (in order) for your site below:
// e.g.: http://admins.guildportal.com/Guild.aspx?GuildID=222222&TabID=111111
// becomes -> tabURL.push ("111111");
// **************************************************************

tabURL.push ("2000001"); // Home
tabURL.push ("2000002"); // Forums
tabURL.push ("2000003"); // Calendar
tabURL.push ("2000004"); // Images
tabURL.push ("2000005"); // Misc

imageWidth = 100;
imageHeight = 100;

// Don't change anything below
// ***************************
var tabType = "";
var currentTab = gup('TabID');
var currentGID = gup('GuildID');
var tabHTML = '<table Class="TabBar2" border=0 cellpadding=2 cellspacing=0 width="100%"><tr>';

for (j = 0; j < tabURL.length; j++) {
 if (currentTab == tabURL[j]) {
  tabType = 'Tab' + (j+1) + 'Sel';
  tabMo = tabType;
 } else {
  tabType = 'Tab' + (j+1) + 'UnSel';
  tabMo = 'Tab' + (j+1) + 'Mo';
 }
 tabHTML += '<td class="' + tabType;
 tabHTML += '" style="width:' + imageWidth + 'px;height:' + imageHeight;
 tabHTML += 'px;" ="this.className=\'' + tabMo;
 tabHTML += '\';return true;" ="this.className=\'' + tabType;
 tabHTML += '\';return true;" onClick="top.location=\'Guild.aspx?GuildID=' + currentGID;
 tabHTML += '&TabID=' + tabURL[j] + '\'"></td>';
}
tabHTML += '</tr></table>';
(tabHTML);

// Code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
function gup(name) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( window.location.href );
 if( results == null )
  return "";
 else
  return results[1];
}
</script>
Customizing the code
  • Note: The first line of the CSS (in blue) hides the original TabBar. You may want to leave this out for testing purposes, then add it back once the script is working properly.

  • The width is the custom tab bar should be adjusted to your liking (it is in red in the CSS above). In my example, I have five tabs, each 100 pixels wide...

    • If you desire no space between your tab bar images, set this number to the width of all your tab images together. With the images I used above, it would be 500px.
    • I chose 550px for my example because I wanted some space between my tab images.

  • Add the URL to your custom images to the CSS (in green). The tabs are numbered from left to right, tab1 being the far left. You can add or subtract the three lines of CSS for each tab bar on your site.

    1. Tab#Sel = Selected tab image
    2. Tab#UnSel = Unselected tab image
    3. Tab#Mo = Mouse over tab image

  • In the Banner area, add the TabID of each tab on your site (in orange above). You can find this number in the URL at the top of your browser: "http://admins.guildportal.com/Guild.aspx?GuildID=222222&TabID=111111"

    • Again, this is listed from left to right, tab #1 being at the top of the list.
    • It should look like this: tabURL.push ("111111");

  • Add the width and height of your tab images into the script (in purple). Again, all images of the tab need to be the same size or there may be alignment problems.

  • It is very difficult to test this script before implementing it on your site because this code uses the site URL to determine which tab you are currently on. So pick a time when you won't have heavy traffic on your site. Feel free to message me if you have problems! Enjoy!
TopBottom

Mottie (MVP) 7/6/2008 6:37 PM EST : Custom tab images v2
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


Hiya, I can't just leave the tab bar as it is LOL...

The code below will allow you to add custom tab images and have them point to any site of your choosing.

With this revision, you can have the tab bar either horizontal (banner area) or vertical (banner area or in a content box). If you plan to use the bar in a content box, you'll have to add the code to every page on your site and any page that is outside your guild site.

In my example below I added the tab bar to my second test site to minimize the clutter on my main test site, but I did add a link named "Roster 2" that links the two sites together. This method should allow you to have two forums for one site or a link to an alliance guild.




Banner Area or Content Box (Free Form Text/HTML)
<style type="text/css">
table.TabBar {display:none;}

.Tab1Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-s.gif) center center no-repeat; }
.Tab1UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-u.gif) center center no-repeat; }
.Tab1Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/home-h.gif) center center no-repeat; }

.Tab2Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-s.gif) center center no-repeat; }
.Tab2UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-u.gif) center center no-repeat; }
.Tab2Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/forum-h.gif) center center no-repeat; }

.Tab3Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-s.gif) center center no-repeat; }
.Tab3UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-u.gif) center center no-repeat; }
.Tab3Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/calendar-h.gif) center center no-repeat; }

.Tab4Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-s.gif) center center no-repeat; }
.Tab4UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-u.gif) center center no-repeat; }
.Tab4Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster1-h.gif) center center no-repeat; }

.Tab5Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mroster2-s.gif) center center no-repeat; }
.Tab5UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-u.gif) center center no-repeat; }
.Tab5Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/roster2-h.gif) center center no-repeat; }

.Tab6Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-s.gif) center center no-repeat; }
.Tab6UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-u.gif) center center no-repeat; }
.Tab6Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/mail-h.gif) center center no-repeat; }

</style>
<script type="text/javascript">
var tabURL = new Array();

// Enter the full URL for each tab (using the same order in the CSS) for your site below:
// You can also include other GuildPortal sites or any other website.
// tabURL.push ("ENTER URL HERE");
// **************************************************************
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205892"); // Home
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205893"); // Forums
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205895"); // Calendar
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205896"); // Roster
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168227");    // Roster2
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205899"); // Mail

// Tab image width and height (same for all images)
var imageWidth = 100;
var imageHeight = 30;

// if below is true, the tab bar will be horizontal... vertical if false
var tabHorizontal = false;

// set the amount of space you want between each tab (horizontal or vertical)
var tabSpacing = 5;

// Add custom background CSS below: color or image
// e.g. "background: #000000 url(myImage.jpg)" <- don't add a semi-colon inside the quotes
var tabBarBackground = "background: url()";

// Don't change anything below
// ***************************
makeTabs();
function makeTabs () {
if (String(top.name).substring(0,4) == "Edit") {return;}
var tabMo = '';
var tabType = '';
var tabClick = '';
var tabNumber = tabURL.length;
var currentURL = window.location.href;
var currentTab = gup('TabID',currentURL);
var currentGID = gup('GuildID',currentURL);
 if (tabHorizontal) {
  var tabBarWidth = (imageWidth*tabNumber) + (tabSpacing*tabNumber);
  imageWidth = imageWidth + (tabSpacing/2);
 } else {
  var tabBarWidth = (imageWidth) + (tabSpacing/2);
  imageHeight = imageHeight + tabSpacing;
 }

var tabCSS = '<style>table.TabBar2 {' + tabBarBackground;
 tabCSS += ';border-spacing:0px;padding:0px;margin:0px;width:' + tabBarWidth;
 tabCSS += 'px;margin-left:auto;margin-right:auto;}</style>';

var tabHTML = tabCSS + '<table Class="TabBar2">';
if (tabHorizontal) tabHTML += '<tr>';

for (j = 0; j < tabNumber; j++) {
 if (currentURL == tabURL[j] || currentTab == gup('TabID',tabURL[j]) && currentGID == gup('GuildID',tabURL[j]) ) {
  tabType = 'Tab' + (j+1) + 'Sel';
  tabMo = tabType;
  tabClick = '';
 } else {
  tabType = 'Tab' + (j+1) + 'UnSel';
  tabMo = 'Tab' + (j+1) + 'Mo';
  tabClick = ' onClick="top.location=\'' + tabURL[j] + '\'"';
 }
 if (!tabHorizontal) tabHTML += '<tr>';
 tabHTML += '<td class="' + tabType;
 tabHTML += '" style="border:0px;padding:0px;margin:0px;width:' + imageWidth + 'px;height:' + imageHeight;
 tabHTML += 'px;" ="this.className=\'' + tabMo;
 tabHTML += '\';return true;" ="this.className=\'' + tabType;
 tabHTML += '\';return true;"';
 tabHTML += tabClick;
 tabHTML += '></td>';
 if (!tabHorizontal) tabHTML += '</tr>';
}
tabHTML += '</tr></table>';
document.write (tabHTML);
}
// Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
function gup(name, myString) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( myString );
 if( results == null )
  return "";
 else
  return results[1];
}
</script>
Customizing the Script
  • Note: The CSS in blue will hide your current tab bar, add this once you have tested the new tab bar

  • Add your custom tab URLs to the CSS (in green). There are three images for each tab and they are named and numbered in the CSS as follows:
    1. Tab#Sel = Selected tab image
    2. Tab#UnSel = Unselected tab image
    3. Tab#Mo = Mouseover tab image

  • Add the URL for each tab of your GuildPortal site and the URL of any other websites you would like to add to your bar in the javascript area as follows:
    • Replace the URL (in orange) for each tab:

      tabURL.push ("ENTER URL HERE");

    • Add or remove this code as needed for more or less tabs

  • Customize your tab bar by changing the code in purple
    • Image height and width - all tab images must be the same size:

      var imageWidth = 100;
      var imageHeight = 30;

    • Orientation of your tab bar: horizontal or vertical. Set this variable as either true or false

      var tabHorizontal = false;

    • Set the spacing between your tabs. It is set to 5 pixels as a default. Set it to zero if you don't want any space.

      var tabSpacing = 5;

    • Customize the tab bar background. Add colors or images as you wish. Use the standard CSS format (add or remove elements in the example)

      var tabBarBackground = "background: #000000 url(http://... myimage.jpg)";
How to add the Custom tab bar
  • Banner Area (only available for paid subscription sites)
    • Paste the above code into your Banner Area
      Control Panel > Style & Colors > Banner Area (under Advanced style settings)
    • Save and Enable the code

  • Content Box Menu (vertical tab bar)
    • Make a "Free Form Text/HTML" box on every page of your site.
    • Then simply paste in your modified code into every box. Ensure you paste the code into the editor while in HTML mode () or by right clicking in the editor and selecting "Paste as HTML".
  • Tabs to other sites:
If you have your tab bar point to another site, simply add the code to that site. You can see an example of how to have the tab bar link to more than one site by clicking on the "Roster" tab of this site. The Navigation bar seen will take you to my "test site 2" roster. I would have used the forums, but I like my forums being the full width of the page 
TopBottom

Mottie (MVP) 7/10/2008 5:19 AM EST : Custom tab images v2.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster


I made a slight change to the new custom tab bars, you can now have images of any height and width as defined in the CSS (in blue). I had to change it to get this tab menu to work. I made this before I knew about the sharing of alliance forums, but the link will just take you to the other site instead. Update: This script will only work with vertical menus now.

Selected tabUnselected tabMouse-over tab

Another thing I did was make the three images above instead of a separate image for each tab, it loads a lot faster. You will see in the CSS below, green text after the "url( ) left top" or "url( ) left -47px". This picks the part of the image to display. left top would be 0px 0px. The Top tab "Home" is 47 pixels tall, but "Our Forums" is only 19 pixels tall, etc.

Home (47 pixels tall)
Our Forums (19 pixels tall)
Mail (38 pixels tall)

I use a program named IrfanView select a block in the image, it gives you the coordinates of the top left corner if your selection box that can be used in the CSS. If you prefer to just make separate images, leave out the image coordinates in the CSS.

I left in the imageWidth and imageHeight variables as it is used to figure out the tab bar width - important if you plan on switching to a horizontal bar. Removed.

Banner Area or Content Box (Free Form Text/HTML)
<style type="text/css">
table.TabBar {display:none;}

.TabBar2 { background: transparent url(); border:0px; padding:0px; }
.TabBar2 li { list-style-type: none; margin:0px; padding:0px; }

.Tab1Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left top no-repeat; height:47px; width:175px; }
.Tab1UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left top no-repeat; height:47px; width:175px; }
.Tab1Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left top no-repeat; height:47px; width:175px; }

.Tab2Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -47px no-repeat; height:19px; width:175px; }
.Tab2UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -47px no-repeat; height:19px; width:175px; }
.Tab2Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -47px no-repeat; height:19px; width:175px; }

.Tab3Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -66px no-repeat; height:19x; width:175px; }
.Tab3UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -66px no-repeat; height:19px; width:175px; }
.Tab3Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -66px no-repeat; height:19px; width:175px; }

.Tab4Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -84px no-repeat; height:19px; width:175px; }
.Tab4UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -84px no-repeat; height:19px; width:175px; }
.Tab4Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -84px no-repeat; height:19px; width:175px; }

.Tab5Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -103px no-repeat; height:18px; width:175px; }
.Tab5UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -103px no-repeat; height:18px; width:175px; }
.Tab5Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -103px no-repeat; height:18px; width:175px; }

.Tab6Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -120px no-repeat; height:19px; width:175px; }
.Tab6UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -120px no-repeat; height:19px; width:175px; }
.Tab6Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -120px no-repeat; height:19px; width:175px; }

.Tab7Sel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3S.png) left -140px no-repeat; height:38px; width:175px; }
.Tab7UnSel { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3U.png) left -140px no-repeat; height:38px; width:175px; }
.Tab7Mo { background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/tabs/menu3M.png) left -140px no-repeat; height:38px; width:175px; }

</style>
<script type="text/javascript">
var tabURL = new Array();

// Enter the full URL for each tab (using the same order in the CSS) for your site below:
// You can also include other GuildPortal sites or any other website.
// tabURL.push ("ENTER URL HERE");
// **************************************************************

tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168223"); // Home
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168224"); // Our Forums
tabURL.push ("http://admins.guildportal.com/Guild.aspx?GuildID=262592&TabID=2205893"); // Alliance Forums
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168226"); // Calendar
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168227"); // Roster
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168229"); // Chat
tabURL.push ("http://www.guildportal.com/Guild.aspx?GuildID=258012&TabID=2168230"); // Mail

makeTabs();
function makeTabs () {
if (String(top.name).substring(0,4) == "Edit") {return;}
var tabMo = '';
var tabType = '';
var tabClick = '';
var tabNumber = tabURL.length;
var currentURL = window.location.href;
var currentTab = gup('TabID',currentURL);
var currentGID = gup('GuildID',currentURL);

var tabHTML = '<div class="TabBar2" align="center">';
for (j = 0; j < tabNumber; j++) {
 if (currentURL == tabURL[j] || currentTab == gup('TabID',tabURL[j]) && currentGID == gup('GuildID',tabURL[j]) ) {
  tabType = 'Tab' + (j+1) + 'Sel';
  tabMo = tabType;
  tabClick = '';
 } else {
  tabType = 'Tab' + (j+1) + 'UnSel';
  tabMo = 'Tab' + (j+1) + 'Mo';
  tabClick = ' onClick="top.location=\'' + tabURL[j] + '\'"';
 }
 tabHTML += '<li><div class="' + tabType;
 tabHTML += '" ="this.className=\'' + tabMo;
 tabHTML += '\';return true;" ="this.className=\'' + tabType;
 tabHTML += '\';return true;"';
 tabHTML += tabClick;
 tabHTML += '></div></li>';
}
document.write (tabHTML);
}
// Original code from Netlobo.com (http://www.netlobo.com/url_query_string_javascript.html)
function gup(name, myString) {
 name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
 var regexS = "[\\?&]"+name+"=([^&#]*)";
 var regex = new RegExp( regexS );
 var results = regex.exec( myString );
 if( results == null )
  return "";
 else
  return results[1];
}
</script>
Edit: You can download the PSD (photoshop file) of the menu above with both Alliance and Horde backdrops (right-click and Save As): menu.psd
Edit (10/23/2008): Updated the code. It was leaving a tiny space between images in IE. I also made this code to only work with a vertical menu, trying to make the spacing work in IE was too painful.
TopBottom

Grace Diamond (Guild Admin) 7/13/2008 11:46 AM EST : RE: Custom tab images v2.1
Grace Diamond
Posts: 197
Posts With Wolves

Sorry to bump in again but I was just hoping you could give me some help?

I did the code exactly as as you said to get the mouse-over yet now I seem to be in a odd situation where I can't get the top page banner image to show without it being randomly behind the tab bar... any thoughts?

Oh and linky to website:

http://royalsovereign.guildportal.com

TopBottom

Mottie (MVP) 7/13/2008 12:20 PM EST : RE: Custom tab images v2.1
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

At the very top of your banner area, add this:
<div><img align=center src="URL to your banner image here"></div>
And your tab button images look very nice! Me likey! 
TopBottom

Grace Diamond (Guild Admin) 7/15/2008 9:53 PM EST : RE: Custom tab images v2.1
Grace Diamond
Posts: 197
Posts With Wolves

Mottie said:
At the very top of your banner area, add this:
<div><img align=center src="URL to your banner image here"></div>
And your tab button images look very nice! Me likey! 


That's the one Mottie, thanks again!

TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%