nicht angemeldet
Bilder dynamisch einbinden (bei Frames)
Hallo!
Folgendes Problem:
Ich möchte ein Bildergalerie realisieren. Ich arbeite dabei mit zwei Frames: Navigationsframe (Bildauswahl.htm) und Main-Frame (Bildanzeige.htm).
Über die Links auf Bildauswahl.htm sollen nun nicht die Bilder direkt in den Main-Frame geladen werden, sondern es soll das jeweilige Bild in Bildanzeige.htm dynamisch eingebunden/gewechselt werden. (Die Bilder haben unterschiedliche Größen.)
(Aufgrund der sehr unterschiedlichen Bildgrößen will ich nicht mit iframe oder dergl. arbeiten, weil sich width und hight bei eingebetteten Frame nicht dynamisch je nach Inhalt definieren lassen oder doch???)
Hoffe, ich habe das Problem verständlich beschrieben. Kann jemand weiterhelfen?
Danke im Voraus!
-
Ei guude wie?
Ich glaub, ich versteh Dein Problem nicht so recht. Was heisst "dynamisch eingebunden"? Willst Du den Vorschau-Frame an das jeweilige Bild anpassen (wenn ja: warum machst Du ihn nicht so klein wie möglich?)? Oder möchtest Du einfach, dass im Anzeige-Frame nicht nur das Bild, sondern eine komplette Seite mit bspw. zentriertem Bild erscheint?
Wenn letzteres der Fall ist, mach einfach ein <div> mit der Breite 100% und einer Center-Ausrichtung in die Anzeige-Seite und beschreibe es per onlick-Event im Auswahlframe und innerHTML neu (Achtung, funktioniert nicht bei allen Browsern). Du könntest aber auch wie in http://selfhtml.teamone.de/javascript/beispiele/buttons.htm beschrieben bei onclick die Bilder austauschen, dass dürfte überall funktionieren.
Beide Methoden haben aber den Nachteil, dass Besucher mit deaktiviertem JS Deine Bilder nicht zu Gesicht bekommen können.
LG ausm Hesseland
Lemmy--
Realität ist die Illusion, die durch ein zu geringes Maß an Alkohol entsteht... -
Hallo.
Hier mein Vorschlag:Inhalt der Frameseite:
-----------------------
<frameset cols="30%,70%">
<frame src="links.html" name="links">
<frame src="rechts.html" name="rechts">
</frameset>Inhalt von Bildauswahl.html:
-----------------------------
<body><script type="text/javascript">
function changeImage( image ){
top.rechts.document.Bild.src = image;
}
</script><ul>
<li><a href="#" onClick="changeImage('Bild1.jpg');return false;">Bild 1</a></li>
<li><a href="#" onClick="changeImage('Bild2.jpg');return false;">Bild 2</a></li>
<li><a href="#" onClick="changeImage('Bild3.jpg');return false;">Bild 3</a></li>
<li><a href="#" onClick="changeImage('Bild4.jpg');return false;">Bild 4</a></li>
<li><a href="#" onClick="changeImage('Bild5.jpg');return false;">Bild 5</a></li>
</ul></body>
Inhalt von Bildanzeige.htm:
-----------------------------
<body><img src="Bild1.jpg" alt="Photo" name="Bild">
</body>
Mehr ist eigentlich nicht nötig ;o)
-
Hallo.
Hier mein Vorschlag:Der aber nur im IE und mit eingeschaltetem Javascript richtig funktioniert. also mindestens 50% der Besucher vergrault - nee, nur ein Witz, aber du weist nicht wieviele die Seite nicht mehr benutzen können. Es können aber viele sein.
Inhalt der Frameseite:
<frameset cols="30%,70%">
<frame src="links.html" name="links">
<frame src="rechts.html" name="rechts">
</frameset>Inhalt von Bildauswahl.html:
<body>
<script type="text/javascript">
function changeImage( image ){
top.rechts.document.Bild.src = image;
}
</script>Das geht nur im IE, da Nestcape die Bildgröße nicht mehr nachträglich änder kann.
<ul>
<li><a href="#" onClick="changeImage('Bild1.jpg');return false;">Bild 1</a></li>Und so würde es auch mit Netscape und ohne JS funktionieren:
<a href="bild1.jpg" target="rechts"
onClick="changeImage(this.href, this.target);return false;">Bild 1</a><script type="text/javascript">
function changeImage( image, target ){
top[target].location.href = image;
}
</script>Hier könnte man aber auch HTML Code reinschreiben, um z.b. eine Hintergrundfarbe auszuwählen.
Struppi.
-
Hallo Struppi.
Getestet habe ich den Code ursprünglich mit Mozilla 1.2.1 (habe keine ältere Version mehr auf dem Rechner). Nach deinem Posting habe ich ihn auch mit einer Opera5 Version getestet; da wird das Bild tatsächlich nicht auf die richtige Größe gebracht!
Mit deinem Vorschlag aber wird jedesmal das Bild selber in dem Frame geladen, und nicht das Bild in dem Document des Frames geändert, was aber Sebastians Wunsch ist.
Gruß,
Manuel-
Mit deinem Vorschlag aber wird jedesmal das Bild selber in dem Frame geladen, und nicht das Bild in dem Document des Frames geändert, was aber Sebastians Wunsch ist.
Dann hast du nicht meinen Code verwendet:
<a href="bild1.jpg" target="rechts"
^^^^^^^^^^^^^^^^
onClick="changeImage(this.href, this.target);return false;">Bild 1</a>und
<script type="text/javascript">
function changeImage( image, target ){
top[target].location.href = image;
}
</script>Struppi.
-
Mit deinem Vorschlag aber wird jedesmal das Bild selber in dem Frame geladen, und nicht das Bild in dem Document des Frames geändert, was aber Sebastians Wunsch ist.
Dann hast du nicht meinen Code verwendet:
<a href="bild1.jpg" target="rechts"
^^^^^^^^^^^^^^^^
onClick="changeImage(this.href, this.target);return false;">Bild 1</a>und
<script type="text/javascript">
function changeImage( image, target ){
top[target].location.href = image;
}
</script>Struppi.
Ich habs sehr wohl gelesen und genau das meine ich. In dem Frame mit Namen "rechts" (nicht in dem Frame mit den Verweisen!) wird mit deinem Code als Dokument ein Bild geladen. Wenn ich aber Sebastian richtig verstehe, möchtet er in dem Frame mit Namen "rechts" ein HTML-Dokument haben, das ein Bild enthält (um z.B. mehr als nur ein Bild zu haben, vielleicht ein Werbebanner, oder angepasster Hintergrund usw.).
Gruß
Manuel -
Mit deinem Vorschlag aber wird jedesmal das Bild selber in dem Frame geladen, und nicht das Bild in dem Document des Frames geändert, was aber Sebastians Wunsch ist.
Nichts leichter als das. Dazu muss er lediglich in der Funktion changeImage den HTML dynamisch generieren und in das Frame schreiben. Und das funktioniert in allen Browsern, die JS und Frames anzeigen können.
Struppi.
-
-
-
-
-
Hallo!
Folgendes Problem:
Ich möchte ein Bildergalerie realisieren. Ich arbeite dabei mit zwei Frames: Navigationsframe (Bildauswahl.htm) und Main-Frame (Bildanzeige.htm).
Über die Links auf Bildauswahl.htm sollen nun nicht die Bilder direkt in den Main-Frame geladen werden, sondern es soll das jeweilige Bild in Bildanzeige.htm dynamisch eingebunden/gewechselt werden. (Die Bilder haben unterschiedliche Größen.)
<frameset cols="150,*">
<frame src="bildauswahl.html">
<frame src="bildanzeige.html" name="bild">
</frameset>bildauswahl.html:
<a href="grosses_bild_1.jpg" target="bild><img src="kleines_bild_1.jpg"></a>
<a href="grosses_bild_2.jpg" target="bild><img src="kleines_bild_2.jpg"></a>
Da du schon mit frames arbeitest wäre das der klügst und einfachste Weg. alles andere mit Javascript wäre schwieriger, umständlicher und viele könnten die Seite nicht benutzen, ohne das es einen wirklichen Mehrwert hätte.
Struppi.