<style type="text/css">
img{opacity: 1;
-webkit-transition: opacity 0.8s linear;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;}
img:hover{opacity: 0.8;
-webkit-transition: opacity 0.7s linear;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;}
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="http://home.no/bloggdesignet/design/nr11/organictabs.js"></script>

----------------------------------------------

<script type="text/javascript" src="http://home.no/bloggdesignet/design/nr11/organictabs.js"></script>
<script type='text/javascript'>
$(function() {
$("#example-one").organicTabs();
$("#example-two").organicTabs({
"speed": 200
});
});
</script>

 ----------------------------------------------

<div id="example-one">

<ul class="nav">
<li class="nav-one"><a href="#one" class="current">ONE NAME</a></li>
<li class="nav-two"><a href="#two">TWO NAME</a></li>
<li class="nav-three"><a href="#three">THREE NAME</a></li>
<li class="nav-four last"><a href="#four">FOUR NAME</a></li>
</ul>

<div class="list-wrap">

<ul id="one">
<li>Stuff in here!one</li>
</ul>

<ul id="two" class="hide">
<li>Stuff in here!two</li>
</ul>

<ul id="three" class="hide">
<li>Stuff in here!three</li>
</ul>

<ul id="four" class="hide">
<li>Stuff in here!four</li>
</ul>

</div> <!-- END List Wrap -->

CSS -------------------------------------------------------------

/* Specific to example one */

#example-one { background: #eee; padding: 10px; margin: 0 0 15px 0; -moz-box-shadow: 0 0 5px #666; -webkit-box-shadow: 0 0 5px #666; }

#example-one .nav { overflow: hidden; margin: 0 0 10px 0; }
#example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
#example-one .nav li.last { margin-right: 0; }
#example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: 10px; text-align: center; border: 0; }
#example-one .nav li a:hover { background-color: #111; }

#example-one ul { list-style: none; }
#example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
#example-one ul li a:hover, #example-one ul li a:focus { background: #fe4902; color: white; }
#example-one ul li:last-child a { border: none; }

#example-one li.nav-one a.current, ul.featured li a:hover { background-color: #0575f4; color: white; }
#example-one li.nav-two a.current, ul.core li a:hover { background-color: #d30000; color: white; }
#example-one li.nav-three a.current, ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
#example-one li.nav-four a.current, ul.classics li a:hover { background-color: #FE4902; color: white; }

/* Generic Utility */
.hide { position: absolute; top: -9999px; left: -9999px; }

</div> <!-- END Organic Tabs (Example One) -->

<script LANGUAGE="JavaScript">
<!--
// This is the implementation of SimpleSwap
// by Jehiah Czebotar
// Version 1.1 - June 10, 2005
// Distributed under Creative Commons
//
// Include this script on your page
// then make image rollovers simple like:
// <img src="/images/ss_img.gif" oversrc="/images/ss_img_over.gif">
//
// http://jehiah.com/archive/simple-swap
//

function SimpleSwap(el,which){
el.src=el.getAttribute(which || "origsrc");
}

function SimpleSwapSetup(){
var x = document.getElementsByTagName("img");
for (var i=0;i<x.length;i++){
var oversrc = x[i].getAttribute("oversrc");
if (!oversrc) continue;

// preload image
// comment the next two lines to disable image pre-loading
x[i].oversrc_img = new Image();
x[i].oversrc_img.src=oversrc;
// set event handlers
x[i].onmouseover = new Function("SimpleSwap(this,'oversrc');");
x[i].onmouseout = new Function("SimpleSwap(this);");
// save original src
x[i].setAttribute("origsrc",x[i].src);
}
}

var PreSimpleSwapOnload =(window.onload)? window.onload : function(){};
window.onload = function(){PreSimpleSwapOnload(); SimpleSwapSetup();}
//-->
</script>

-----------------------------------------------