Keskustelu: Koodit: JavaScript: Alasvetovalikko

<style type="text/css">
A {
	font: 12px Tahoma black;
}
#tablist {
	padding: 3px 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0.1em;
	font: bold 12px Verdana;
}
#tablist li {
	list-style: none;
	display: inline;
	margin: 0;
}
#tablist li a {
	text-decoration: none;
	padding: 3px 0.5em;
	border: 1px solid silver;
	background: white;
}
#tablist li a:link, #tablist li a:visited {
	color: navy;
}
#tablist li a.current {
	background: silver;
}
#tabcontentcontainer {
	width:480px;
	height:40px;
}
.tabcontent {
	padding: 3px 0.5em;
	display:none;
	font:12px Verdana;
}
</style>
<script type="text/javascript">
var initialtab=[1, "sc1"]
var turntosingle=0
var disabletablinks=0
var previoustab=""
if (turntosingle==1)
document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>')

function expandcontent(cid, aobject) {
	if (disabletablinks==1)
	aobject.onclick=new Function("return false")
	if (document.getElementById) {
		highlighttab(aobject)
		if (turntosingle==0) {
			if (previoustab!="")
			document.getElementById(previoustab).style.display="none"
			document.getElementById(cid).style.display="block"
			previoustab=cid
		}
	}
}

function slideshow()
{
	self.setTimeout("expandcontent('tyhja', this)",3000)
}

function highlighttab(aobject) {
	if (typeof tabobjlinks=="undefined")
	collecttablinks()
	for (i=0; i<tabobjlinks.length; i++)
	tabobjlinks[i].className=""
	aobject.className="current"
}

function collecttablinks() {
	var tabobj=document.getElementById("tablist")
	tabobjlinks=tabobj.getElementsByTagName("A")
}

function do_onload() {
	collecttablinks()
	expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1])
}

if (window.addEventListener)
	window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
	window.attachEvent("onload", do_onload)
else if (document.getElementById)
	window.onload=do_onload
</script>

<ul id="tablist">
<li><a href="#" onMouseover="expandcontent('sc1', this);" onMouseOut="slideshow('tyhja');">Linkki 1</a></li>  ++
<li><a href="#" onMouseover="expandcontent('sc2', this);" onMouseOut="slideshow('tyhja');">Linkki 2</a></li>  ++
<li><a href="#" onMouseover="expandcontent('sc3', this);" onMouseOut="slideshow('tyhja');">Linkki 3</a></li>  ++
<li><a href="#" onMouseover="expandcontent('sc4', this);" onMouseOut="slideshow('tyhja');">Linkki 4</a></li>  ++
<li><a href="#" onMouseover="expandcontent('sc5', this);" onMouseOut="slideshow('tyhja');">Linkki 5</a></li>
</ul>

<DIV id="tabcontentcontainer">

<div id="sc1" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 1 linkit
</div>
<div id="sc2" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 2 linkit
</div>

<div id="sc3" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 3 linkit
</div>

<div id="sc4" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 4 linkit
</div>

<div id="sc5" class="tabcontent" style="border:1px solid silver;">
Linkkilistan kohdan 5 linkit
</div>

<div id="tyhja" class="tabcontent">

</div>