Image tabs for the web sites

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

image tabs

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:

scroll right image
TabLeft
TabLeftSelected
tabMiddle
tabMiddleSelected
TabRight
TabRightSelected

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

7 thoughts on “Image tabs for the web sites

  • July 23, 2012 at 6:25 PM

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

    Reply
  • July 23, 2012 at 6:23 PM

    Avinash,

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

    Reply
  • July 22, 2012 at 2:43 PM

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

    Reply
  • July 22, 2012 at 1:09 PM

    Hi Salaudeen,

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

    Reply
  • June 19, 2012 at 2:53 PM

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

    Reply

Leave a Reply