Image tabs for the web sites

I wanted to have image tabs like the below picture, for my web site.

We can get this by little JavaScript and HTML itself.  Here is how I’ve done this.

<html>
<head>
<title></title>
<script language="javascript" type="text/javascript">

function setTabContent(Caller)
{
var s='Content-'+Caller;
document.getElementById('TabContainer').innerHTML=document.getElementById(s).innerText;
for (i=1;i<=6;i++)
{
document.getElementById("Tab"+i).className="";
}
document.getElementById(Caller).className="selected";
return false;
}

</script>
<link rel="Stylesheet" href="styles.css">
</head>
<body onload="javascript:setTabContent('tab1')">

<div id="Content-Tab1" style="display: none">
I&#39;am the content from Hiddent div 1!!! </div>
<div id="Content-Tab2" style="display: none">
I&#39;am the content from Hiddent div 2!!! </div>
<div id="Content-Tab3" style="display: none">
I&#39;am the content from Hiddent div 3!!! </div>
<div id="Content-Tab4" style="display: none">
I&#39;am the content from Hiddent div 4!!! </div>
<div id="Content-Tab5" style="display: none">
I&#39;am the content from Hiddent div 5!!! </div>
<div id="Content-Tab6" style="display: none">
I&#39;am the content from Hiddent div 6!!! </div>
<div>
<ul class="TabStrip">
<li>
<a id="Tab1" class="selected" href="javascript:void(0)" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Overview</span></span></a>
</li>
<li>
<a id="Tab2" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Description</span></span></a>
</li>
<li>
<a id="Tab3" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Learn More</span></span></a> </li>
<li>
<a id="Tab4" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
References</span></span></a>
</li>
<li>
<a id="Tab5" href="javascript:void(0)" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Images</span></span></a>
</li>
<li>
<a id="Tab6" href="javascript:void(0);" onclick="javascript:setTabContent(this.id)">
<span class="wrap">
<span class="innerWrap" style="WIDTH: 80px">
Feedback</span></span></a>
</li>
</ul>
</div>
<div id="TabContainer">
</div>
</body>
</html>

Style.css

.TabStrip
{
 font: 11px Verdana, sans-serif;
 border-bottom: solid 1px #408000;
 margin-left: 1px;
}

.TabStrip li
{
display: inline;
}

.TabStrip li a
{
 padding-left: 10px;
 background: transparent url('img/TabLeft.png') 0px 0px no-repeat;
 line-height: 24px;
 color: #ffffff;
 text-decoration:none; 
}

.TabStrip li a .wrap
{
 color: #ffffff;
 font-weight:bold;
 padding-right: 10px;
 line-height: 24px; 
 background:transparent url('img/tabRight.png') right 0px no-repeat;
}

.TabStrip li a:hover
{
 color: #ffffff;
 text-decoration:underline;
}

.TabStrip li a .innerWrap
{
 line-height: 24px;
 background:transparent url('img/tabMiddle.png') 0px 0px repeat-x;
 text-align: center;

}

.TabStrip li a.selected
{
 padding-left: 10px;
 background: transparent url('img/TabLeftSelected.png') 0px 0px no-repeat;
 line-height: 24px;
  text-decoration:none;
}

.TabStrip li .innerWrap
{
 cursor: default;
}

.TabStrip li a.selected .wrap
{
 background-image:url('img/tabRightSelected.png');
 line-height: 24px;
 padding-right: 10px;
 color: #000000;
 font-weight:bold;
}

.TabStrip li a.selected .innerWrap
{
 background-image:url('img/tabMiddleSelected.png');
 padding-top: 0px;
}

You can download the images here:

Salaudeen Rajack

Salaudeen Rajack - SharePoint Expert with Two decades of SharePoint Experience. Love to Share my knowledge and experience with the SharePoint community, through real-time articles!

7 thoughts on “Image tabs for the web sites

  • Thanks a lot Salaudeen !! Do you have any blogs on Silverlight WebParts ??

    Reply
  • Avinash,

    It depends. If you want to show this tabs only on one page, You can use CEWP. Otherwise go for Web Part!

    Reply
  • Should i add a CEWP in every site to get this effect on all sites ?

    Reply
  • Hi Salaudeen,

    Can you tell me where should i add this code please ? I am new to SharePoint

    Reply
  • Hi, can you post the css for this as well? The code shows bulleted entries without the css. Thanks.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *