Tulos

Navigointipalkki selitteellä?

Navigointipalkki
AVUT CSS HTML JS

Koodi

Tämä tulee HEAD-osastoon

<script type="text/javascript">
 function päälle(alkio, selitys) {
 alkio.style.background = "coral";
 document.getElementById("selite").innerHTML = selitys;
 }

 function syrjään(alkio) {
 alkio.style.background = "bisque";
 document.getElementById("selite").innerHTML = "Navigointipalkki";
 }
</script>
<style type="text/css">
/*Navigaatiopalkin valinnaiset ulkoasumääritykset.*/
.palkki {
	background-color:black;
	width:12em;
}

.palkki td {
	font-family:Arial;
	border:1px solid black;
	background-color:bisque;
	text-align:center;
	width:25%;
	padding:.25em;
}

.palkki td a {
	text-decoration:none;
	color:black;
	display:block;
}

#selite {
	font-family:Verdana;
	font-size:10pt;
	border:1px solid black;
	background-color:ivory;
}
</style>

Tämä tulee BODY-osastoon

<table
 class="palkki">

<tr>
<td
 id="selite"
 colspan="4">
Navigointipalkki
</td>
</tr>

<tr>
<td
 onmouseover="päälle(this,'Sekalaisia resursseja')"
 onmouseout="syrjään(this)">
<a href="/avut.htm">AVUT</a>
</td>

<td
 onmouseover="päälle(this,'Materiaalia tyyleistä')"
 onmouseout="syrjään(this)">
<a href="/css.htm">CSS</a>
</td>

<td
 onmouseover="päälle(this,'Merkkausmateriaalia')"
 onmouseout="syrjään(this)">
<a href="/html.htm">HTML</a>
</td>

<td
 onmouseover="päälle(this,'JavaScriptejä')"
 onmouseout="syrjään(this)">
<a href="/js.htm">JS</a>
</td>
</tr>
</table>

Tämä sivu kuuluu vaikeimpiin JavaScript-esimerkkeihin.

Weppipakin kotisivulle