Søk i Webskolen:

Globale linker

• Linker
• Oppgaver

JavaScript

• JavaScript intro
• Plassering
• 1ste script
• Store Bokstaver
• Reserverte ord
• Pop-up bokser
• Variabler
• Operatorer
• If og Else
• Funksjoner
• Events
• Loops
• Arrays
• Objekter
• DOM
• Properties
• Methods
• Dato objektet
• Småtips
• Oppgaver

Oppgave 28

Stylesheet

<style>
body{font-family:arial; background-color: #FFFFFF;}

table{font-size:80%;background:black}

a{color:black;text-decoration:none;font:bold}

a:hover{color:#606060}

td.meny{background:lightblue}

/* det eneste spesielle er at tabellen som ligger inne i cellene er absolutt plassert, men fortsatt inni */
table.meny{
font-size:90%;
position:absolute;
visibility:hidden;
}
</style>

Scriptet

<script type="text/javascript">
function vismeny(tabellID){
document.all(tabellID).style.visibility = "visible"
}

function skjulmeny(tabellID){
document.all(tabellID).style.visibility = "hidden"
}

</script>

HTML-koden

<table width="100%">
<tr bgcolor="#FF8080">
<!-- Første celle -->
<td width="25%" onMouseOver="vismeny('artister')"
onMouseOut="skjulmeny('artister','pg',' er best')">
<a href="#">Favoritt-artister</a><br />
<table class="meny" id="artister" width="100%">
<tr>< td class="meny"><a href="#">Peter Gabriel</a></td></tr>
<tr><td class="meny"><a href="#">Oscar Peterson</a></td></tr>
<tr><td class="meny"><a href="#">The Clash</a></td></tr>
<tr><td class="meny"><a href="#">J.D. Souther</a></td></tr>
<tr><td class="meny"><a href="#">Travis</a></td></tr>
</table>
</td>
<!-- Andre celle -->
<td width="25%" onMouseOver="vismeny('figurer')"
onMouseOut="skjulmeny('figurer')">
<a href="#">Brumm-figurer</a><br />
<table class="meny" id="figurer" width="100%">
<tr><td class="meny"><a href="#">Ole Brumm</a></td></tr>
<tr><td class="meny"><a href="#">Nasse N&oslash;ff</a></td></tr>
<tr><td class="meny"><a href="#">Tigergutt</a></td></tr>
<tr><td class="meny"><a href="#">Sprett</a></td></tr>
<tr><td class="meny"><a href="#">Tussi</a></td></tr>
<tr><td class="meny"><a href="#">Ugla</a></td></tr>
</table>
</td>
<!-- Tredje celle -->
<td width="25%" onMouseOver="vismeny('blader')"
onMouseOut="skjulmeny('blader')">
<a href="#">Blader</a><br />
<table class="meny" id="blader" width="100%">
<tr><td class="meny"><a href="#">Donald Duck</a></td></tr>
<tr><td class="meny"><a href="#">Ole Brumm</a></td></tr>
<tr><td class="meny"><a href="#">Fantomet</a></td></tr>
<tr><td class="meny"><a href="#">S&oslash;lvpilen</a></td></tr>
<tr><td class="meny"><a href="#">Sprint</a></td></tr>
</table>
</td>
<!-- Fjerde celle -->
<td width="25%" onMouseOver="vismeny('wodehouse')"
onMouseOut="skjulmeny('wodehouse')">
<a href="#">Wodehouse-figurer</a><br />
<table class="meny" id="wodehouse" width="100%">
<tr><td class="meny"><a href="#">Wooster</a></td></tr>
<tr><td class="meny"><a href="#">Jeeves</a></td></tr>
<tr><td class="meny"><a href="#">Bingo</a></td></tr>
<tr><td class="meny"><a href="#">Psmith</a></td></tr>
<tr><td class="meny"><a href="#">Tante Agatha</a></td></tr>
</table>
</td>
</tr>
< /table>