nicht angemeldet
Layertechnik ganz einfach per JavaScript schalten
MoinMoin
mit »setAttribute« lässt sich einfach ein Layer grösser/kleiner schalten oder eine Hintergrundfarbe hinzufügen.
Der Layer mit id="nav":
A. AusgangsFormat ist schmal beschnitten + transparent,
B. Das aktive Format bei onMouseover ist gross + Hintergrundfarbe.
Nichts leichter als das mit ein paar JavaScript-Zeilen und einem EventHandler-sensitiven Feld:
**********************
Im <head> stehen die JavaScript-Funktionen
"navgross" LayerElement id=nav voll darstellen + Hintergrundfarbe setzen ("#003366")
"navschmal" LayerElement id=nav beschnitten darstellen + Hintergrundfarbe löschen (""):
<script type="text/javascript" language="JavaScript1.1">
<!--LayerElement-nav-
function navgross() {
document.getElementById("nav").style.clip = "rect(10px 270px 240px 20px)";
document.getElementById("nav").style.backgroundColor = "#336699";
}
function navschmal() {
document.getElementById("nav").style.clip = "rect(10px 270px 52px 20px)";
document.getElementById("nav").style.backgroundColor = "";
}
//-->
</script>
Anmerkung: rect(0px 270px 32px 0px) zeichnet/beschneidet ein darzustellendse Element in den Abmessungen von
10px obere waagerechte Elementgrenze von oben (ein Bild würde oben beschnitten)
270px rechte senkrechte Elementgrenze von links (ein Bild würde rechts beschnitten)
52px/240px untere waagerechte Elementgrenze von oben (Elementgröße senkrecht also: 5210 = 42px) (ein Bild würde unten beschnitten)
20px linke senkrechte Elementgrenze von links (Elementgröße waagerecht also: 27020 = 250px) (ein Bild würde links beschnitten).
Im <head> stehen auch die CSS-Formatierungen:
<style type="text/css">
<!--
body { background-image:url(hleiste.gif); background-repeat:repeat-y;}
#nav {
display:block;
position:absolute;
top:8px;
right:8px;
width:236px;
padding:8px;
clip:rect(10px 270px 52px 20px);
z-index:2; }
#nav[id] {position:fixed; }
-->
</style>
Anmerkung: Das nav-Element ist fixiert und bildet einen LayerBlock, der mit den obigen JavaScriptFunktionen mal groß mal klein geschaltet wird.
AusgangsGröße entspricht genau der Größe in der JavaScript-Funktion navschmal().
Das body-Element besteht aus einem Hintergrundbild. Als CSS-Element läßt sich der Kacheleffekt horizontal/vertikal sperren.
Im <body> steht dann die Schaltfläche als div-LayerElement id=nav mit den schaltenden MausHandlern:
<body bgcolor="#336699" text="#EEEEFF">
<div id="nav" onMouseover="navgross();" onMouseout="navschmal();">
<h3>TitelText</h3>
<p>0<br>
1<br>
2<br>
3<br>
4<br>
5<br>
6</p>
</div>
</body>
-
Hallo Klaus,
[...]
Was willst du jetzt eigentlich wissen?
Grüße aus Nürnberg
Tobias [der hofft dass er dafür nicht geschlagen wird aber schließlich hat er kein '?' in dem Posting gefunden :-)]