✔ Bilder werden bei Onmouseover an der falschen Stelle angezeigt

[Merbi]

Nabend zusammen,

ich habe folgendes Geschrieben:

		<div id="left">

		<a href="index.php?id=dennis.php" onmouseover="document.getElementById('dennis').style.visibility='visible'" onmouseout="document.getElementById('dennis').style.visibility='hidden'">Dennis</a><br>
		<a href="index.php?id=pascal.php" onmouseover="document.getElementById('pascal').style.visibility='visible'" onmouseout="document.getElementById('pascal').style.visibility='hidden'">Pascal</a><br>
		<a href="index.php?id=lennard.php" onmouseover="document.getElementById('lennard').style.visibility='visible'" onmouseout="document.getElementById('lennard').style.visibility='hidden'">Lennard</a><br>
		<a href="index.php?id=marius.php" onmouseover="document.getElementById('marius').style.visibility='visible'" onmouseout="document.getElementById('marius').style.visibility='hidden'">Marius</a>

		</div>

		<div id="right">

		<img id="dennis" src="templates/images/dennis.jpg" style="visibility:hidden;">
		<img id="pascal" src="templates/images/pascal.jpg" style="visibility:hidden;">
		<img id="lennard"src="templates/images/lennard.jpg" style="visibility:hidden;">
		<img id="marius" src="templates/images/marius.jpg" style="visibility:hidden;">

		</div>

Das Problem ist nun, dass die Bilder nicht an der selben Stelle eingeblendet werden sondern sozusagen unterinander.

Hoffe ihr könnt mir helfen.

LG Daniel

 

[Maik]

Hi,

hast du für die Grafikelemente die gewünschte Position festgelegt? Ohne sie werden die Elemente nämlich im normalen Textfluss angezeigt.

Ich schieb das Thema dann mal rüber ins CSS-Forum, denn mit JS hat das nicht viel zu tun.

 

[Merbi]

Falls du im CSS meinst glaube ich nicht das ich das richtig gemacht habe.

#left {
	position: relative;
	float: left;
}

#right {
	position: relative;
	float: right;
	margin-right: 20px;
}

LG Daniel

 

[Hansii1234]

Hi KingOfRap!

Dein Problem liegt daran, dass du "visible='hidden'" benutzt!
Das ist kein Problem von JavaScript sondern von CSS.
visible='hidden' macht zwar das Bild unsichtbar aber der Platz für das Bild wird noch frei gehalten, doch benutzt du statt "visible='hidden'", "display='none'" und statt "visible='visible'", "display='block'", sollten die Bilder übereinander liegen!


Gruß!

 

[Maik]

Wenn die Bilder an derselben Stelle / Position angezeigt werden sollen, müssen sie bei Verwendung der visibility-Eigenschaft auch entsprechend positioniert werden, beispielsweise so:

#dennis, #pascal, #lennard, #marius {
position:absolute;
left:50px;
top:100px;
}

 

[Merbi]

Kann ich mir jetzt eine Lösung aussuchen oder muss ich Beides gemeinsam benutzen.

LG Daniel

 

[Maik]

Du hast die freie Wahl: entweder stellst du visibility (hidden/visible) auf display (none/block) um, oder du erweiterst das Stylesheet mit der Element-Positionierung.