Change Bg 50%

by Apple Ilagan

HTML

<div class="thewhole">   
<div id="search1"><a href="#" class="thelink" target="1">One</a></div>
<div id="search2"><a href="#" class="thelink" target="2">Two</a></div>
<div id="search3"><a href="#" class="thelink" target="3">Three</a></div>
<div id="search4"><a href="#" class="thelink" target="4">Four</a></div>
<div class="searchc showme" id="searchc1"></div>
<div class="searchc" id="searchc2"></div>
<div class="searchc" id="searchc3"></div>
<div class="searchc" id="searchc4"></div>
</div>

CSS

.thewhole {width:500px; height:500px; margin:0 auto; position:relative;}
#search1{width:25%; height:25%; position:absolute; top:0; left:0; border:#333 1px solid;}
#search2{width:25%; height:25%; position:absolute; top:0; right:0; border:#333 1px solid;}
#search3{width:25%; height:25%; position:absolute; bottom:0; left:0; border:#333 1px solid;}
#search4{width:25%; height:25%; position:absolute; bottom:0; right:0; border:#333 1px solid;}

#searchc1{background:red; width:25%; height:25%; position:absolute; top:0; left:0;}
#searchc2{background:blue; width:25%; height:25%; position:absolute; top:0; right:0;}
#searchc3{background:green; width:25%; height:25%; position:absolute; bottom:0; left:0;}
#searchc4{background:#bbb; width:25%; height:25%; position:absolute; bottom:0; right:0;}

.thelink{position:relative; z-index:9999;}
.searchc {display:none;}

JavaScript

jQuery(function () {
    jQuery('.thelink').hover(function (e) {
        var index = $(this).parent().index(),
            newTarget = jQuery('.searchc').eq(index);
        jQuery('.searchc').not(newTarget).fadeOut('fast')
        newTarget.css("zIndex", "9").delay('fast').fadeIn('fast')
        jQuery(".thelink").removeClass("activebtn");
        jQuery(e.currentTarget).addClass("activebtn");
        return false;
    })
});