|
Nå mangler bare html-koden som registrerer mus-hendelser og kaller på funksjonene vi laget i del 2. Vi tar
nå utgangspunkt i den html-koden som vi skrev i del 1. Siden koden blir veldig uoversiktlig plukker jeg ut kun de
linjene som skal forandres. Disse er her markert med blå skrift.
<table width="176" bgcolor="#3870A8" border="0" cellspacing="0" cellpadding="3"><tr><td>
<table width="100%" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="2"><tr><td>
<table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td valign="top">
<table bgcolor="#3870A8" cellpadding="1" cellspacing="0" border="0" width="100%"><tr><td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td><table background="bakgrunn_overskrift.jpg" width="100%" cellpadding="3" cellspacing="0" border="0"><tr>
<td><span class="meny">Diverse</span></td>
<td width="9" valign="middle"><img src="opp.gif" id="velger_diverse" alt="Klikk for å vise/skjule" width="12" height="12"></td></tr></table>
</td>
</tr>
<tr id="skille_diverse"><td height="1"></td></tr>
<tr bgcolor="#D1E1F1" id="under_diverse">
<td>
<a href="hoved.html" target="hoved" class="menyvalg">Hovedside</a><br>
<a href="humor.html" target="hoved" class="menyvalg">Humorside</a><br>
<a href="venner.html" target="hoved" class="menyvalg">Venner's hjemmesider</a><br>
<a href="logg.html" target="hoved" class="menyvalg">Logg</a>
</td>
</tr>
</table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
Når vi peker med musen på overskriftsraden i meny-tabellen skal knappen lyse opp for å markere at man skal klikke på denne for å
vise/skjule menyen. Vi kaller derfor på funksjonen bytt_knapp. Vi må også passe på at vi stiller tilbake knappen når musen
ikke lenger holdes over dette området.
<td onMouseOver="bytt_knapp('diverse', 'on')" onMouseOut="bytt_knapp('diverse', 'off')"><table background="bakgrunn_overskrift.jpg" width="100%" cellpadding="3" cellspacing="0" border="0"><tr>
<td><span class="meny">Diverse</span></td>
<td width="9" valign="middle"><img src="opp.gif" id="velger_diverse" alt="Klikk for å vise/skjule" width="12" height="12"></td></tr></table>
</td>
Når vi klikker på bildet skal vi kalle på funksjonen som viser/skjuler menyen.
<td onMouseOver="bytt_knapp('diverse', 'on')" onMouseOut="bytt_knapp('diverse', 'off')"><table background="bakgrunn_overskrift.jpg" width="100%" cellpadding="3" cellspacing="0" border="0"><tr>
<td><span class="meny">Diverse</span></td>
<td width="9" valign="middle"><img src="opp.gif" onClick="vis_skjul('diverse')" id="velger_diverse" alt="Klikk for å vise/skjule" width="12" height="12"></td></tr></table>
</td>
Så var det koden som kaller på funksjonen oppstart før siden vises. Dette gjøres inni body-taggen med en heldelse som heter
onLoad.
<body onLoad="oppstart()">
Hvis du henger med i svingene, så kan jeg si at verre var det ikke. Under følger koden i sin helhet, samt en fungerende
demonstrasjon av hvordan det hele virker.
<html>
<head>
function vis_skjul(valg) {
if(document.all["under_" + valg].style.display == "none")
{
document.all["velger_" + valg].src = opp_on.src
document.all["under_" + valg].style.display = ''
document.all["skille_" + valg].style.display = ''
}
else
{
document.all["velger_" + valg].src = ned_on.src
document.all["under_" + valg].style.display = "none"
document.all["skille_" + valg].style.display = "none"
}
}
function bytt_knapp(valg, on_off) {
if(on_off == "on")
{
if(document.all["velger_" + valg].src == ned.src)
document.all["velger_" + valg].src = ned_on.src
else if(document.all["velger_" + valg].src == opp.src)
document.all["velger_" + valg].src = opp_on.src
}
else if(on_off == "off")
{
if(document.all["velger_" + valg].src == ned_on.src)
document.all["velger_" + valg].src = ned.src
else if(document.all["velger_" + valg].src == opp_on.src)
document.all["velger_" + valg].src = opp.src
}
}
function oppstart() {
opp = new Image()
opp_on = new Image()
ned = new Image()
ned_on = new Image()
opp.src = "opp.gif"
opp_on.src = "opp_on.gif"
ned.src = "ned.gif"
ned_on.src = "ned_on.gif"
}
</head>
<body onLoad="oppstart()">
<table width="176" bgcolor="#3870A8" border="0" cellspacing="0" cellpadding="3"><tr><td>
<table width="100%" bgcolor="#ffffff" border="0" cellspacing="0" cellpadding="2"><tr><td>
<table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td valign="top">
<table bgcolor="#3870A8" cellpadding="1" cellspacing="0" border="0" width="100%"><tr><td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td onMouseOver="bytt_knapp('diverse', 'on')" onMouseOut="bytt_knapp('diverse', 'off')"><table background="bakgrunn_overskrift.jpg" width="100%" cellpadding="3" cellspacing="0" border="0"><tr>
<td><span class="meny">Diverse</span></td>
<td width="9" valign="middle"><img src="opp.gif" onClick="vis_skjul('diverse')" id="velger_diverse" alt="Klikk for å vise/skjule" width="12" height="12"></td></tr></table>
</td>
</tr>
<tr id="skille_diverse"><td height="1"></td></tr>
<tr bgcolor="#D1E1F1" id="under_diverse">
<td>
<a href="hoved.html" target="hoved" class="menyvalg">Hovedside</a><br>
<a href="humor.html" target="hoved" class="menyvalg">Humorside</a><br>
<a href="venner.html" target="hoved" class="menyvalg">Venner's hjemmesider</a><br>
<a href="logg.html" target="hoved" class="menyvalg">Logg</a>
</td>
</tr>
</table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</td></tr></table>
</body>
</html>
|
