Auswirkungen von einem Div auf ein anderes

00eraser00 · 17. August 2007

Hi,

ich habe ein Menü in dem aufgrund von klicken JavaScript Funktionen aufgerufen werden. Ich möchte nun, dass sich aufgrund des Klicks in einem anderen Div das Bild sich ändert also er ein anderes lädt. Habe das mit iframe getestet, das geht auch soweit, aber da macht er immer nen Rahmen drum und den Bereich größer als das Bild tatsächlich ist. Auch wenn ich keine Höhe und Breite angebe. Kann ich dieses irgendwie ändern? Oder hat jemand ne Idee wie man das besser lösen kann?

Quaese · 17. August 2007

Hi,

sicher bin ich mir nicht, ob ich dein Problem richtig verstanden habe. Du willst bei einem Klick auf ein
Element erreichen, dass ein Bild in einem iFrame angezeigt wird. Dort änderst du sicherlich nur das
src-Attribut. Damit wird ein "Dummy"-Dokument mit Standardwerten im iFrame erstellt. Dieses
besitzt auch die üblichen margin- und padding-Werte eines body-Elementes.

Du könntest beim Klicken eine Funktion aufrufen, die das iFrame-Dokument öffnet und die erforderlichen
Informationen hinein schreibt. Das Anpassen des Frames an die Bildgrösse erfolgt nachdem das Bild geladen
wurde (onload-Event). Dazu wird eine "resize"-Routine im Topframe aufgerufen.

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
  <!--
function changeImg(strSrc){
  with(top.frameImg){
  document.open();
    document.write("<html><head>");
    document.write("<script>");
    document.write("window.onload = function(){ top.resizeFrame(document.getElementById('imgID').width, document.getElementById('imgID').height);}");
    document.write("</script>");
    document.write("</head><body style=\"margin: 0; padding: 0;\">");
    document.write("<img src=\""+strSrc+"\" id=\"imgID\" style=\"display: block;\">");
    document.write("</body></html>");
    document.close();
  }
}

function resizeFrame(intWidth, intHeight){
  document.getElementById("frameImg").style.width = intWidth + "px";
  document.getElementById("frameImg").style.height = intHeight + "px";
}
 //-->
</script>
</head>
<body>
<a href="#" onclick="changeImg('bild1.jpg'); return false;">Bild 1</a>
<a href="#" onclick="changeImg('bild2.jpg'); return false;">Bild 2</a>
<iframe name="frameImg" id="frameImg" src="" frameborder="0"></iframe>
</body>
</html>

Vielleicht hilft dir das weiter.

Ciao
Quaese

Auswirkungen von einem Div auf ein anderes

00eraser00

Grünschnabel

Quaese

Moderator

Neue Beiträge