Mouseover (Image) zieht Tabelle auseinander

[Bsheep]

Hallo zusammen!

Ich habe für meine Website eine Tabelle mit Miniaturansichten von einer Auswahl an selbst erstellten Bildern gemacht.
Nun möchte ich, dass bei mouseover das Bild in Originalgröße angezeigt wird, ohne jedoch eine separate Unterseite zu erstellen, in dem ich das Bild einbinde.
Eigentlich funktioniert es auch soweit. Doch wenn ich eines der Miniaturansichten auswähle zieht es mir die Tabelle auseinander.
Es soll jedoch lediglich das Originalbild drüber legen.
Kann mir dabei vielleicht jemand helfen?

Hier mal als Beispiel einen Screen von der Tabelle und bei mouseover:
http://i119.photobucket.com/albums/o145/DieKleeneHexe/Tabelle.jpg
http://i119.photobucket.com/albums/o145/DieKleeneHexe/Tabellemouseover.jpg

Einen lieben Gruß,
Bianca

(Tabelle wurde hier gekürzt und Dateinamen habe ich durch einen anderen Text ersetzt)

<script language="JavaScript">
<!-- Begin

image1 = new Image;
image1.src = "Name des ersten Bildes.gif";

image2 = new Image;
image2.src = "Name des ersten Bildes klein.gif";

image3 = new Image;
image3.src = "Name des zweiten Bildes.gif";

image4 = new Image;
image4.src = "Name des zweiten Bildes klein.gif";

// End -->
</script>

<table width="600" border="0">
      <tr>
        <td width="150"><a href="dateiname.htm"
onMouseOver="button01.src=image1.src"
onMouseOut="button01.src=image2.src">
<img src="Name des ersten Bildes klein.gif" wborder="0" name="button01"> </a></td>
        <td width="150"><a href="dateiname.htm"
onMouseOver="button03.src=image3.src"
onMouseOut="button03.src=image4.src">
<img src="Name des zweiten Bildes klein.gif" wborder="0"
name="button03">
</a></td> </tr>
    </table>

[Ole]

Hallo,

du tauscht hier ein kleines gegen ein großes Bild aus. Da das große Bild mehr Platz benötigt als das kleine, verschiebt sich natürlich auch deine Tabelle.

Wenn du das große Bild über die Tabelle legen willst (so habe ich dich verstanden), solltest du das Bild nicht in der Tabelle anzeigen, sondern außerhalb und dann entsprechend über der Tabelle positionieren.

Grüße
Ole
(8-)>

[Bsheep]

Vielen Dank für deine Antwort.
Ich hatte vergessen zu erwähnen, daß sich die Bilder, wenn sie nicht innerhalb einer Tabelle positioniert sind, auch verschieben.
Gibt es die Möglichkeit, es über ein Popup Fenster zu regeln?

[Ole]

Hallo,

Ich hatte vergessen zu erwähnen, daß sich die Bilder, wenn sie nicht innerhalb einer Tabelle positioniert sind, auch verschieben.

Ist auch richtig so, da du ja vorhandene Bilder durch größere ersetzt.

Gibt es die Möglichkeit, es über ein Popup Fenster zu regeln?

Gibt es auch. Wie du es am Ende löst ist natürlich dir überlassen. Pop-ups haben jedoch den Nachteil, dass sie sehr häufig vom Browser geblockt werden bzw. meiner Erfahrung nach generell vom User nicht erwünscht sind.

Gruß
Ole
(8-)>

[fastix®]

Moin!

Gibt es die Möglichkeit, es über ein Popup Fenster zu regeln?

Wozu?

Lese über Positionierung und Anzeige von Elementen nach.

http://de.selfhtml.org/css/eigenschaften/positionierung.htm

  
  
<div style="display:none">  
<!-- Cache, soll große Grafiken "vorladen" -->  
<img src="grossbild1.jpeg">  
<img src="grossbild2.jpeg">  
  
<img src="kleinbild1.jpeg" style="position:absolute; top:600px; left:100px; heigth:100px; width:200px"  
onmouseover="document.getElementById('grossbild').src='grossbild1.jpeg'"  
onmouseout="document.getElementById('grossbild').src='clearpixel.gif'">  
  
<img src="kleinbild1.jpeg" style="position:absolute; top:600px; left:300px; heigth:100px; width:200px" onmouseover="document.getElementById('grossbild').src='grossbild2.jpeg'"  
onmouseout="document.getElementById('grossbild').src='clearpixel.gif'">  
  
<img id="grossbild" style="position:absolute; top:100px; left:100px; heigth:400px; width:600px" src="clearpixel.gif">  

Ungetestet. 'clearpixel.gif' ist ein 1*1 Pixel großes durchsichtiges Gif. Findet sich im Web z.B. unter http://www.medizin.uni-tuebingen.de/medphys/clearpixel.gif

MFFG (Mit freundlich- friedfertigem Grinsen)

fastix®