FABULOUS

<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>
-----------------------------------------------
<script language="JavaScript" type="text/javascript">
if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }
function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>
</script>
<script src="http://data.korkad.nu/f/rbyy_cufon-yui.js" type="text/javascript"></script>
<script src="http://data.korkad.nu/f/fragment_core_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h3');
Cufon.replace('h2');Cufon.replace('.navheader');
</script>
-----------------------------------------------
<center><div onClick="openClose('a1')" style="overflow:auto; cursor:hand; cursor:pointer"><b><img src="http://cdn1.cdnme.se/3958288/6-3/header_51cf1c269606ee2516c56153.png"></b></div>
<div id="a1" class="texter"><center>
<center><img src="http://cdn1.cdnme.se/4111404/6-3/fdsfsdfs_51c328639606ee6120c02dbe.png"><center>
-----------------------------------------------