Denne organisatoren består av 3 deler: Style, javscript og selve menydelen.
Style og javascriptet kan du hente inn på siden med:
<link href="page_organiser.css" rel="stylesheet" type="text/css">
og
<script language="JavaScript" type="text/JavaScript" src="page_organiser.js">
</script>
Eller du kan legge dem inn direkte på siden din. Du legger da style og script mellom HEAD-taggene:
<script language="JavaScript">
var subs_array = new Array("sub1","sub2","sub3");
function displaySubs(the_sub){
if (document.getElementById(the_sub).style.display==""){
document.getElementById(the_sub).style.display = "none";return}
for (i=0;i<subs_array.length;i++){
var my_sub = document.getElementById(subs_array[i]);
my_sub.style.display = "none";
}document.getElementById(the_sub).style.display = "";
}
</script>
<style>
.para {
font-family: "Verdana","Arial","sans-serif";
font-size: 10pt;
}
a.headings:link {color: #000000;text-decoration:underline;width:100%;}
a.headings:visited {color: #aa6611; width:100%}
a.headings:hover {color: #ff9933; text-decoration:none; width:100%}
a.headings:active {color: #0000ff;width:100%}
a.headings {background-image: url(eksempler/bilder/headline.jpg);background-repeat:no-repeat;font-family:"Verdana","arial","sans-serif";font-size:10px;}
</style>
Så kommer meny-delen.
Pass på at du er nøye med antall linker du legger inn. Skal du ha flere enn disse 3 må du legge til i javascriptet (var subs_array = new Array("sub1","sub2","sub3");)
ID i link-koden må også navnes til riktig "sub" ( id="sub4" osv.)
<div id="container" style="position:absolute; left:150px; top:200px; width:577px; height:200px; z-index:3">
<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub1')" onFocus="if(this.blur)this.blur()";>
<strong>Link nr.1</strong> </a> </p>
<div class="para" id="sub1" style="display:none">
Her setter du inn teksten din. Den kan formateres som vanlig HTML.<br>Du kan også sette inn bilder, tabeller eller hva du vil!
</div>
<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub2')" onFocus="if(this.blur)this.blur()";>
<strong>Link nr.2</strong> </a> </p>
<div class="para" id="sub2" style="display:none">
Her kommer mere tekst.....
</div>
<p><a href="javascript:void(0)" class="headings" onClick="displaySubs('sub3')" onFocus="if(this.blur)this.blur()";>
<strong>Link nr.3</strong> </a> </p>
<div class="para" id="sub3" style="display:none">
Og enda mere tekst.........
</div>
</div>
Den første setningen:
(<div id="container" style="position:absolute; left:150px; top:200px; width:577px; height:200px; z-index:3">)
bestemmer plasseringen av menydelen.
Hvis du vil ha bildet (bakgrunden på linkene) kan du hente det her!
|
