Bei Bild berührung Fenster öffnen

[Assassins]

Hallo Communty,
ich habe eine Frage, wo Ihr hoffentlich eine Lösung wisst.

Wie Ihr auf dem Foto seht, sind dort mehrere Icons.
Jetzt möchte Ich gerne wenn man mir der Maus rüber geht, dass sich unter den Icons ein Fenster öffnent. Also das dann unter den Icons ein Fenster mit Texten und Co. ist.

Ich möchte nicht die Seite irgendwie neuladen oder so. Auch sollte es gehen, wenn man mit der Maus über ein Icon geht.

Ich hoffe Ihr wisst eine Lösung

 

[vitus37]

Sieh dir mal die CSS-Pseudoklasse 'hover' an. Mit ihr lassen sich Elemente einblenden, während man ein anderes mit der Maus überfährt.
:hover: Mouseover-Effekt: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

P.S. Mit PHP ist das übrigens nicht realisierbar.

 

[Assassins]

hi vielen dank.
Habe ich auch bemerkt, dass es mit PHP nicht geht. Deshalb deswegen schonmal sry.

Ich werde mal gucken, ob ich damit was gutes schaffe...

Edit:
Gibt es eigentlich die möglichkeit, sogesagt für alle Icions ein "Element" zu benutzen? .. Also dass immer das gleiche Fenster benutzt wird, und nicht immer wieder ein neues...

Habe derzeit den Code:

<a <a href="#" onMouseOver="document.getElementById('test2').style.visibility='visible';" onMouseOut="document.getElementById('test2').style.visibility='hidden';"><img src="twitter.png"></a>

und

<div id="test2" style="position:left; width:900px; height:75px; z-index:1; left: 450px; top: 400px; background-color: silver; layer-background-color: #002200; border: 1px solid #FFFFFF; visibility:hidden;">
TEST
</div>

 

[wolle54]

Wenn Du vorher Deine Inhalte in einem Array speicherst, kannste bei onMouseOver ein einziges Objekt ansprechen und den Inhalt per innerHTML austauschen.

infotext=new Array();
infotext[twitter] = 'TWITTER.....';
infotext[sonstiges] = 'SONSTIGES.....';

Im HTML dann:

<a href="#" onMouseOver="document.getElementById('test2').innerHTML = infotext[twitter]; document.getElementById('test2').style.visibility='visible';" onMouseOut="document.getElementById('test2').style .visibility='hidden';"><img src="twitter.png"></a>

und halt Dein leeres Div

<div id="test2" style="position:left; width:900px; height:75px; z-index:1; left: 450px; top: 400px; background-color: silver; layer-background-color: #002200; border: 1px solid #FFFFFF;
</div>

Was ist eigentlich der Style position: left???

Den Code oben habe ich nicht getestet. Soll eher ein Ansatz sein.

 

[threadi]

position: left;

gibt es nicht. "position" kann nur die Werte "static" (default), "relative", "absolute" und "fixed" annehmen. So eine falsch definierte CSS-Eigenschaft hätte keinerlei Wirkung auf die Ausgabe im Browser.