✔ Bei Mouseover anderer Inhalt

[D-LuX]

ich möchte gerne via Javascript ein Menü erstellen, bei dem zu jedem Menüpunkt rechts daneben in einem großen Fenster der passende Inhalt dynamisch angezeigt wird ...

Ich würde verschiedene Layer machen und die übereinander legen.
Wenn ich jetzt im Menü auf Punkt 1 klicke, soll Layer1 rechts im Div erscheinen.
Selbes Spiel bei Punkt 2 usw.

Wie lege ich denn die verschiedenen div-layer übereinander?

Danke und beste Grüße
D-LuX

 

[Gumbo]

Du könntest sie absolut positionieren und immer nur jeweils eins sichtbar lassen (visibility-Eigenschaft).

 

[D-LuX]

klappt das browserübergreifend ohne probleme?
Hatte mich mal an javascript versucht, was das ein- und ausblenden von layern angeht, aber beim div´s übereinanderlegen bin ich gescheitert

Werds mit der position:absolute mal probieren

 

[Maik]

Hi,

klappt das browserübergreifend ohne probleme?

die CSS-Positionierung wird von den Browsern gleichermaßen und einheitlich unterstützt.

 

[D-LuX]

Du könntest sie absolut positionieren und immer nur jeweils eins sichtbar lassen (visibility-Eigenschaft).

ist das ohne javascript möglich via css?

oder benötige ich zwingend javascript?

 

[Gumbo]

Es ist möglich, jedoch von der Element-Struktur und der Unterstützung durch die Browser abhängig. So ist beispielsweise folgendes möglich:

<ul>
	<li>foobar<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></li>
	<li>foobar<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></li>
	<li>foobar<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div></li>
</ul>

ul {
	width: 20%;
}
ul li div {
	position: absolute;
	top: 0;
	left: 20%;
	visibility: hidden;
}
ul li:hover div {
	visibility: visible;
}

Hier ist es unter anderem der Internet Explorer, bei dem die :hover-Pseudoklasse nur auf a-Elemente anwendet werden kann.

 

[Maik]

Hier ist es unter anderem der Internet Explorer, bei dem die :hover-Pseudoklasse nur auf a-Elemente anwendet werden kann.

Dies gilt aber nur für die Vorgängerversionen des IE7, denn die aktuelle Version kann das Stylesheet tadellos handeln.

 

[D-LuX]

Vielen Dank
Hab die div´s jetzt absolute positioniert über:

position:absolute;

Und blende sie nun über javascript aus.

function menue()
 {
 if(document.getElementById('A').style.visibility='hidden') 
  {
  document.getElementById(B').style.visibility='visible';
  document.getElementById('C').style.visibility='hidden';
  document.getElementById('D').style.visibility='hidden';
  document.getElementById('E').style.visibility='hidden';
  }
 }
<a href=# onmouseover=menue()>link</a>

und das dann für jeden der Menüpunkte

Schönen Abend Euch noch!

 

[Gumbo]

IDs müssen mit einem Buchstaben beginnen.

 

[D-LuX]

Ja, hab ich eigentlich so gemacht, wollte nur Diskretion bewahren