Text dynamisch generieren nach Mouseover

[stefaneins]

Hallo liebe TP-Gemeinde,

ich hätte eine brennende Frage, die ich zur Fertigstellung eines Projektes hier benötigen würde:

Ich habe auf einer Seite im Headerbereich ein Bild mit verschiedenen Personen; nun habe ich die einzelnen Personen mit mehreren Hotspots markiert. Ich möchte nun das im Hauptbereich meiner Seite sich der Text (Name + Infos zur Person) ändert - je nach dem über welche Person ich mich gerade mit der Maus befinde (Mouseover). Wie kann ich das realisieren?

Hoffe auf Hilfe - vielen Dank!
Liebe Grüße

Stefan

[Rinaldo]

http://meyerweb.com/eric/css/edge/popups/demo.html
http://meyerweb.com/eric/css/edge/popups/demo2.html

[chrisi10]

Würde ich mit Ebenen machen. Erstelle einfach so viel unsichtbare Ebenen (visibility: hidden wie du Personen hast und lege sie übereinander. Benenne die Ebenen vieleicht nach den Vornamen deiner Personen damit du beim verlinken auf diese den Überblick behältst. Dann schreibst du in jede Ebene was du zu der verlinkten Person angezeit bekommen willst. Dann Markierst du den Hotspot, gehst auf Verhalten, klickst auf das Pluszeichen und wählst Elemente ein/ausblenden. Dann wählst du die Ebene und gibst im Verhaltenfenster an, dass die Ebene bei onMouseover eingeblendet werden soll. Das selbe noch einmal aber mit ausblenden bei onMouseout.

[stefaneins]

Hallo,

so ich hab das jetzt eigentlich ganz wunderbar mit verschiedenen Ebene realsiert. Also über die 16 Personen einen Hotspot gelegt und 16 (versteckte) Ebenen im Hauptfenster gebaut. Jetzt habe ich nur das Problem, welches ich mir schon fast gedacht habe und weswegen ich Ebenen eigentlich erst vermeiden wollte, das die Ebenen je nach Browser, Auflösung und Größe nicht an richtiger Stelle bleibt sondern zumeist falsch angezeigt wird - also verschoben ist! Gibt es eine Möglichkeit diese Div-Tags (Ebenen) an mein Hauptfenster bzw. also Hauptbereich zu binden / ranzuhängen bzw. also irgendwie zu verhindern das sich das verschieben kann und dann immer an richtiger (gleicher!) Stelle angezeigt wird?!

Ich hoffe einer kennt eine Lösung . . .
Vielen Dank!

[stefaneins]

Nochmal zur Problemverdeutlichung:
Die versteckten Ebenen sind ja einfach mit der "AP Div zeichnen" Funktion als Kästchen eben auf der Seite manuell gezeichnet worden. Da die Seite an sich zentriert ist und somit - je nach breite des Browserfenster - sich verschiebt müsste man die Ebenen irgendwie an den Hauptteil der Seite verankern. Der Hauptteil ist im CSS definiert:

#rightcolumn {
	float: right;
	color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	width: 500px;
	height: 325px;
	display: inline;
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	text-align: left;
	line-height: 21px;
	background-color: #FFFFFF;
	margin-bottom: 0px;

[Singal]

Gibt´s da noch mehr Code oder ´nen Link?

[chrisi10]

Wenn ich mich nicht irre, verwendest du bei deiner Seite Prozentangeben. Wenn ja wäre es nicht schlecht gewesen, wenn du das mal wo erwähnt hättest. Du redest ja davon, dass sich die Ebenen verschieben. Du kannst deine Ebenen auch mit Prozentangaben platzieren. Dann passen sie sich auch an, wenn mal eine andere Auflösung vorhanden ist.
Könnte so aussehen:

.#rightcolumn {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	position: absolute;
	top: 50px; 
	left: 50%;
	width: 222px;
	height   : 222px;
	margin-left: -300px;
	border:1px solid #000000;
	padding:10px;
	overflow:auto;
	background-color: #CCCCCC;
}

top: 50px; Abstand von Oben
left: 50%; div wird in der Mitte centriert
margin-left: -300px; div wird von der Mitte aus 300px nach links verschoben. Diesen Wert musst du für deine Seite anpassen.

Aber wie es "Singal" schon sagte.

Gibt´s da noch mehr Code oder ´nen Link?

Grüße Chris

[Singal]

Hüstel, hüstel - Singal bitte.

[chrisi10]

Zitat von Singal

Hüstel, hüstel - Singal bitte.

Ich hab jetzt fast ne Minute gebraucht, bis ich draufkam was du da meinst.
Name falsch, habs gleich ausgebessert.
Chris