Results 1 to 4 of 4

Thread: tabs script

  1. #1
    Join Date
    Aug 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default tabs script

    1) Script Title: DD Tab Menu II

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...ddtabmenu2.htm

    3) Describe problem:

    I would like to know how I can alter this script to use 8 of my own image tabs. 4-on and 4-off images.

    My tabs:

    /images/locate-on.gif
    /images/locate-off.gif
    /images/buy-on.gif
    /images/buy-off.gif
    /images/sell-on.gif
    /images/sell-off.gif
    /images/myaccount-on.gif
    /images/myaccount-off.gif

    I need to do it this way because my images are not just tab shape they have text on them.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    One of the central concepts of the tab menu is to conserve on bandwidth, code, and download times by using the same two images as background for the text of each link.

    If you must forgo these efficiencies, here is where the image rollover behavior is set, in the styling (from Step 1):

    Code:
    #ddimagetabs a{
    display: block;
    text-decoration: none;
    font: bold 12px Arial; /*tab font */
    color: black; /*font color */
    width: 86px; /*width of tab image */
    height: 22px; /*height of tab image */
    float: left;
    display: inline;
    margin-left: 4px; /*spacing between tabs */
    padding-top: 4px; /*vertical offset of tab text from top of tab*/
    background-image:url(bluetab.jpg); /*URL to tab image */
    background-repeat: no-repeat;
    text-align: center;
    }
    
    #ddimagetabs a:hover, #ddimagetabs a.current{
    background-image:url(bluetabover.jpg); /*URL to tab image onmouseover */
    color: black;
    }
    To individualize the rollovers, each anchor link could be given a unique id (from Step 2):

    Code:
    <div id="ddimagetabs">
    <a id="link1" href="http://url/" onMouseover="expandcontent('sc1', this)">Home</a> <a id="link2" href="http://url/" onMouseover="expandcontent('sc2', this)">New</a> <a id="link3" href="http://url/" onMouseover="expandcontent('sc3', this)">Revised</a><a id="link4" href="http://url/" onMouseover="expandcontent('sc4', this)">Submit</a>
    </div>
    You would then remove the background-image declarations (and only the background-image declarations) from the Step 1 style and create new ones for each link:

    Code:
    #ddimagetabs a#link1 {
    background-image:url('/images/locate-off.gif');
    }
    #ddimagetabs a#link2 {
    background-image:url('/images/buy-off.gif');
    }
    #ddimagetabs a#link3 {
    background-image:url('/images/sell-off.gif');
    }
    #ddimagetabs a#link4 {
    background-image:url('/images/myaccount-off.gif');
    }
    
    #ddimagetabs a#link1:hover, #ddimagetabs a#link1.current {
    background-image:url('/images/locate-on.gif');
    }
    #ddimagetabs a#link2:hover, #ddimagetabs a#link2.current {
    background-image:url('/images/buy-on.gif');
    }
    #ddimagetabs a#link3:hover, #ddimagetabs a#link3.current {
    background-image:url('/images/sell-on.gif');
    }
    #ddimagetabs a#link4:hover, #ddimagetabs a#link4.current {
    background-image:url('/images/myaccount-on.gif');
    }
    Since you would not be using any text, you should place a &nbsp; entity in each link's text area (example for one link):

    HTML Code:
    <a id="link1" href="http://url/" onMouseover="expandcontent('sc1', this)">&nbsp;</a>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2004
    Location
    UK
    Posts
    2,358
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1
    Since you would not be using any text, you should place a &nbsp; entity in each link's text area ...
    If the OP isn't going to be using text, then either img elements (with appropriate replacement text) should be used with a scripted rollover, or an "image replacement" technique should be used. I dislike the latter as they always tend to fail in some way.

    <a id="link1" href="http://url/" onMouseover="expandcontent('sc1', this)">&nbsp;</a>
    If the OP did use something like that, the document risks becoming unnavigable without images enabled.

    Mike

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by mwinter
    If the OP did use something like that, the document risks becoming unnavigable without images enabled.
    Yet another reason not to forgo the efficiencies of the original script. And, yes, for image disabled/unavailable browsers the changes that I outline would make the page difficult, not impossible to navigate. It would still have navigable links, if the mouse cursor were hovered over the right areas. Remember, these 'links' aren't links, the links are in the tab content areas.

    I like the idea of foreground image rollovers for this though, it would be more accessible if javascript and images were disabled, provided that the markup and site design were such to take advantage of the completely different navigational system that could be made available to users with that configuration (similar to the way the menu in its default format can be made to do, though you can bet the farm that few folks go the extra mile to set this menu up that way for their differently abled/browsered users).
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •