Irregular Button Shape Background Images With Pure CSS or Javascript ie6 compatible. (I know.. ancient) I cant use jquery

Question

I have spent the last 6 hours trying to get this thing to work. Im hoping for some help here. I cant use jquery.

Basically you hover over and the background goes grey and on click it will show the tooltip underneath.

Heres The sprite

HTML

<div class="wrapper">
    <div id="top">
        <div class="section one">NEGOTIATIONS</div>
        <div class="section two">IMPPLEMENT AND <br> TRACK CHANGES</div>
        <div class="section three">LABOR RELATIONS</div>
        <div class="section four selected"> NEGOTIATIONS <br> PREPARATION </div>
<div class="background"></div>        
    </div>
    <div class="bottom">
        <div class="text hidden">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
                Prepatation will include a cross-fuctional team consisting of Compensation and Benefits, Communications and Government Relations, Legal, Gloabal Security and Procurement.
            </p>

            <div class="moreInfo"><a href="#">More Info</a></div>
        </div>
        <div class="text hidden">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
                Prepatation will include a cross-fuctional team consisting of Compensation and Benefits, Communications and Government Relations, Legal, Gloabal Security and Procurement.
            </p>

            <div class="moreInfo"><a href="#">More Info</a></div>
        </div>
        <div class="text hidden">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
                Prepatation will include a cross-fuctional team consisting of Compensation and Benefits, Communications and Government Relations, Legal, Gloabal Security and Procurement.
            </p>

            <div class="moreInfo"><a href="#">More Info</a></div>
        </div>
        <div class="text showen">
            <p>
                A Comprehensive Process the leadership will undertake to prepare or the bargaining contract. This includes, but is not limited to the formal kick-off process, developing proposals and contingency plans, reviewing those plans to gain approval, etc.
            </p>
            <p>
                Prepatation will include a cross-fuctional team consisting of Compensation and Benefits, Communications and Government Relations, Legal, Gloabal Security and Procurement.
            </p>

            <div class="moreInfo"><a href="#">More Info</a></div>
        </div>
    </div>
</div>

CSS

body{
    position:relative;
    margin:0 auto;
    padding:0;
    width:100%;
    font-family: 'Arial';
    font-size:12px;
}

a{
    color:#2e6099;
    text-decoration: none;
    font-family:'Arial';
}
a:hover{
    color:#20456d;
    text-decoration: none;
    font-family:'Arial';
}


.wrapper{
    width:698px;
    margin:0 auto;
}

#top{
    width:698px;
    margin:0 auto;
    height:40px;
    font-size:12px;
    color:#ffffff;
    text-align:center;
}
.background{
    position:absolute;
    background: url('http://i.imgur.com/KnOId7W.png') no-repeat;
    background-position:0px 0px;
    width:698px;
    height:40px;
    z-index:-2;
}

.section{
    float:left;
    width:170px;
    height:100%;
    cursor: pointer;
    padding:0px;
    margin:0px;
    line-height: 40px;
    z-index:5;
}

.bottom{
    border: 1px solid #666666;
    font-size:16px;
    width:680px;
}

.text{
    margin:10px;
}

.moreInfo{
    text-align:right;
    margin:0 10px
}

.showen{display:block;}
.hidden{display:none;}

I tried to get it working with javascript but its not working when added to my code. http://jsfiddle.net/7EE9J/

Answer 1

The reason behind why it worked on JSFiddle and not in your HTML file is because JSFiddle by default wraps you code in a window.onload event handler.

Without this, the DOM is not loaded when the JS is run, making any changes ineffective. To resolve this, you can just wrap your code inside

window.onload = function(){
    // your code
}

to make it work. But as you've pointed out, your code is not really practical, so here, have a practical-ish version. (You have to wrap it in the function I mentioned above to make it work.)

---

The practical-ish version

I've altered your HTML and JS slightly in order to make it work, but it's possible. The only addition I did to the HTML was that I added the classes one, two, three and four to the respective .text elements. Also, if you use my code, you can get rid of the showed class, as it is not required.

Here's the JavaScript:

function getByClass(className,no){
    var item = document.getElementsByClassName(className);
    return typeof no == 'number' && no >= 0 ? item[no] : item;
}
var background = getByClass("background",0);
function bgPos(px){
    background.style.backgroundPosition = "0px "+(px?px:0)+"px";
}
var classes = ['one','two','three','four'];
for (var i = 0; i < classes.length; i++){
    var elements = getByClass(classes[i]),
        menuItem = elements[0],
        text = elements[1];
    (function(menuItem,text){
        menuItem.onmouseover = bgPos(-(40+(i*20)));
        menuItem.onmouseout = bgPos();
        menuItem.onclick = function(){
            var texts = getByClass('text');
            for (var j = 0; j < texts.length; j++){
                if (texts[j].className.indexOf('hidden') == -1)
                    texts[j].className += ' hidden';
            }
            text.className = text.className.replace(/(\s?hidden|hidden\s?)/,'');
        }
    })(menuItem,text);
}

Guess I lied when I said slightly, but I wanted make some major reforms, because the way you were doing it is not necessarily practical.

Let me explain what everything does:

The getByClass function allows you to select items with their classes, along with an optional index parameter to specify which element you need.
The bgPos function is just a little shortcut to make the background position change easier. The only parameter it accepts specifies the position you were changing. In the for loop, this is calculated dynamically. If no value is given, it defaults to 0.

I created an array with all the classes you're using, then I looped through them. Fist, I use the new getByClass function to get the elements which use the class classes[i], which gives us an array of 2 elements, since both the menu element and the text element have those classes. I simply assign the first matched item (the menu item) and the second matched item (the text div) to their own variables.

After this, you will find a strange looking function inside a function, for which there's an explanation here. This function will set our mouseover and mouseout events, and also add a click event handler, to handle clicks, obviously.

Inside the click handler, we make sure that all items with the text class also have the hidden class, which hides the element. After this, ever text div is hidden, then right after, we remove that class from the specific text div we want to display.

Here you can find a working JSFiddle with the code I posted here. I had to add some additional text so you could see that the elements are in fact updating properly, since they all had the same contents.

In case you need more clarification, feel free to ask in the comments.