Sliding door buttons technique revisited...

[exdiogene]

Post HTML Suite Plugin's DEMO

*** If you are looking for an affordable hosting with great support quality, click here! ***

This tutorial is to help new theme designers and coders to know the "sliding door" technique to create and display many buttons of different width, with only one image.

I hope that this tutorial will help MyBB people to understand a little bit more how they can decrease the downloading time of a webpage having many single images buttons compare to only one image. Here are some facts :

A webpage having 10 menu buttons and 10 other buttons elsewere in the page will take approximately 9 seconds to download with a 56Kbauds modem if the average size of the images are 3KBytes.
( 20 buttons * 3KB = 60KB )
( 56Kbauds modem transfer at an average of 3KBytes/second )
( 60KB / 3KB = 20 seconds )

With this technique one single 3KB image is needed for all buttons taking less than 1 second even with the extra text needed to create all buttons.

Please note that you must also include a javascript portion for the browsers not able to handle the features actually available with FireFox for the button movements on actuation.

The second biggest advantage of this technique compared to the graphic buttons is that it is very easy to create new buttons with different text on the fly, not needing any graphic editors.

So we need first an image suitable for all our buttons, i have choosen a wood stick for this tutorial. As you can see i created a 800 pixels image to suit any portion of the screen and high enough to insert multiple line of text if needed.

Here is the image i will use (reduced to 700 pixels for this page):



Here are some sample buttons created with this technique, click on them to see the effect :



To achieve this effect you need two things :

First, you have to create your HTML content to display your buttons at the proper places formated the proper way, like this :

PHP Code:[Highlight]

<ul class="TheButton" style="font: 900 12px/16px 'Arial', Helvetica, sans-serif;">
 <li><a href="#">
  <span>Typical sliding doors button</span></a></li>
 <li><a href="#">
  <span><img src="/images/gcrown/on.gif" border="none" align="middle"> 
   Typical sliding doors button with a lot more text in it...</span></a></li>
 <li><a href="#">
  <span>Typical sliding doors button with a lot more text in it
   <br />and also having two lines of text in it...</span></a></li>
</ul>
<br style="clear:both;" /> 


Second, you need to create your CSS entries to view the buttons and links properly, here is how you do this :

PHP Code:[Highlight]

ul.TheButton {
        padding: 0;
    margin: 0;
    list-style: none;
    float: left;
}

ul.TheButton li {
    float: left;
    display: inline; /*For ignore double margin in IE6*/
    margin: 0 10px;
}

ul.TheButton li a {
        height: 74px;
    text-decoration: none;
        background-attachment:fixed;
    background: url(MyButton2.gif) no-repeat top right;
    padding-right: 22px;
    float:left;
    color: #ff8;
    cursor: pointer;
}

ul.TheButton li a span {
        height: 54px;
        /height: 74px;
        background-attachment:fixed;
    background: url(MyButton2.gif) no-repeat top left;
    margin: 0 0 0 -20px;
    padding: 11px 8px 0px 18px;
    position: relative; /*To fix IE6 problem (not displaying)*/
    float:left;
}
ul.TheButton li a:hover {
    color: #8ff;
}
ul.TheButton li a:active {
    color: #7dd;
    background-position: right 3;
}
ul.TheButton li a:active span{
    color: #7dd;
    background-position: left 3;
        padding-top: 14px;
} 


This is what was used to create the 3 first buttons in the precedent frame. You can use this method to create vertical and horizontal menus easily...

The buttons are created with two sections, the left one is the one containing the "link" and the right one is just a copy of the right end of the image.

The images movements are done using the link CSS attributes changing only the vertical placement of the background images and the vertical padding of the text.

Some old versions of Internet Explorer have difficulties achieving the images movement because they do not react to the mouse click properly. This can be corrected using javascript to do the job, using this :

PHP Code:[Highlight]

<script>
function buttonin(obj){
  if (navigator.appName.indexOf('Netscape') == -1)
  {
    var MySpan = obj.getElementsByTagName('span');
    MySpan[0].style.color = "#8ff";
  }
}
function buttondown(obj){
  if (navigator.appName.indexOf('Netscape') == -1)
  {
    var MySpan = obj.getElementsByTagName('span');
    MySpan[0].style.color = "#7dd";
    MySpan[0].style.backgroundPosition = "left 3";
    MySpan[0].style.paddingTop = "14px";
    obj.style.backgroundPosition = "right 3";
  }
}
function buttonup(obj){
  if (navigator.appName.indexOf('Netscape') == -1)
  {
    var MySpan = obj.getElementsByTagName('span');
    MySpan[0].style.color = "#8ff";
    MySpan[0].style.backgroundPosition = "left top";
    MySpan[0].style.paddingTop = "11px";
    obj.style.backgroundPosition = "right top";
  }
}
function buttonout(obj){
  if (navigator.appName.indexOf('Netscape') == -1)
  {
    var MySpan = obj.getElementsByTagName('span');
    MySpan[0].style.color = "#ff8";
  }
}
</script> 


To use the javascript you need to modify your HTML code for this instead :

PHP Code:[Highlight]

<ul class="TheButton" style="font: 900 12px/16px 'Arial', Helvetica, sans-serif;">
 <li><a href="#"
  onmouseover="buttonin(this);"
  onmousedown="buttondown(this);"
  onmouseup="buttonup(this);" 
  onmouseout="buttonout(this);">
  <span>Typical sliding doors button</span></a></li>
 <li><a href="#"
  onmouseover="buttonin(this);"
  onmousedown="buttondown(this);"
  onmouseup="buttonup(this);" 
  onmouseout="buttonout(this);">
  <span><img src="/images/gcrown/on.gif" border="none" align="middle"> 
   Typical sliding doors button with a lot more text in it...</span></a></li>
 <li><a href="#"
  onmouseover="buttonin(this);"
  onmousedown="buttondown(this);"
  onmouseup="buttonup(this);" 
  onmouseout="buttonout(this);">
  <span>Typical sliding doors button with a lot more text in it
   <br />and also having two lines of text in it...</span></a></li>
</ul> 


This is all for the moment i will continue the explanations soon.

Meantime you can use this code freely(without the images that are copyrighted to Regentronique) and look at these new sample buttons i just made using a 2 images technique :

[LuminousX]

eh? i dont really get it. where's the open door thingy

[Chandy]

Very useful dude thx

[exdiogene]

(02-05-2010 12:23 AM)LuminousX Wrote:  eh? i dont really get it. where's the open door thingy

The sliding door effect is attibuted to the fact that two images are kind-of overlapping themself for different width, like the movement of a sliding door...