HTML/CSS iframe

KeinKommentar

KeinKommentar

Stolzer Webbi :-)
ID: 8090
L
13 Juni 2006
2.077
190
Weil ich meinen Besuchern ein 9.000px breites Bild zeigen will, ohne mir die ganze Seite zu zerschroten, habe ich auf einen iframe zurückgegriffen:

Code: 
<iframe src="Bilder/bayeux.jpg" name="teppich" width="590" height="380" align="left" scrolling="auto" marginheight="0" marginwidth="0" frameborder="0"></iframe>

Problem ist, daß im FF das eingebundene Bild nicht in Originalgröße angezeigt wird, sondern minimiert und man es erst anklicken muß, um es in ganzer Größe sehen zu können.

Liegt das am FF bzw. meinen Einstellungen und/oder kann ich mittels Code dafür sorgen, daß das Bild sofort richtig angezeigt wird? Beim IE gibt es keine Probleme.
 
Zuletzt bearbeitet:
Ich finde du schrottest dein Design mehr durch ein iFrame als durch ein klug eingebundenen Banner.

Zu deinem Problem kann ich gerade nichts sagen, müsste ich mir mal angucken. Link?
 
Vergiss das mit dem Iframe. Pack das in ein div, gib dem Div die Breite der Seite und definiere overflow: auto;.

Durch den Iframe erzwingst du das Default-Verhalten des Browsers beim Aufrufen einer Bilddatei. Und da die meisten Browser das Bild passend skalieren, passiert das auch innerhalb deines Iframes.

Greetz

paddya
 
Nimm statt dem iframe lieber ein div ;)

HTML: 
<div style="width:590px;height:380px;overflow:auto;"> 
<img src="Bilder/bayeux.jpg" alt="Teppich">
</div>


*edit* Eine Minute zu spät :doh: :mrgreen:
 
Das müsste eigentlich genauso gut ohne IFrame und das dadurch entstehende Problem gehen:
HTML: 
<div style="width:590px;overflow-x:auto;">
    <img src="Bilder/bayeux.jpg" alt="" />
</div>
Untested und eventuell muss auto durch scroll ersetzt werden.

[edit]

Drei Doofe, ein Gedanke. :D
 
Na, so doof könnt ihr drei nicht sein. Sieht jetzt deutlich besser aus. Und vor allem so, wie ich das will. Danke.

Meine andere Seite ist so gut wie kompplett mit divs erstellt, weil ich mal schauen wollte, wie das geht. Allerrdings war mir nicht klar, daß man da so einfach mit overflow operieren kann. Und da ich bei seöfhtml zuerst auf iframe gestoßen bin...

Wieder etwas gelernt. Und das ist gut so. Aber das ist auch einer der Gründe, warum ich im Rahmen meiner sehr bescheidenen Kenntnisse immer mal etwas anderes ausprobieren möchte. Demnächst will ich möglicherweise ein Video einbinden...
 
Schau Dir doch das Bild im Link an. :p
Es handelt sich um eine Art Panorama. Die Bildvorlage ist rund 70m breit, aber nur 60cm hoch.
 
Ich noch mal... Will wieder div verwenden. Dieses Mal soll der User aber gerade nicht scrollen müssen, weil es sich um eine Serie von sechs einzelnen Bildern handelt. Könnte die natürlich auch einfach untereinander einbinden, wie ich das schon öfter getan habe, aber zur Abwechslung möchte ich versuchen, daß der User einen Button drücken muß, um das nächste Bild im container zu sehen. Nach Möglichkeit sollen die Bilder nicht einzeln geladen werden, sondern schon im Hintergrund, während der Leser sich mit dem Text beschäftigt.

Ihr könnt mir auch gern Hinweise geben, wonach man da bei selfhtml suchen muß.
 
Das geht ganz gut mit JavaScript. Ein div brauchst Du dazu nicht wirklich, kannst das zwar gerne in ein div packen aber ob das jetzt hilft, kommt drauf an.

Prinzipiell läuft es so ab, dass Du ein <img>-Tag hast, wo zunächst mal das erste Bild geladen ist. Bei Klick auf den Button wird dann eine JavaScript-Methode aufgerufen, die den Bild-URL einfach durch das nächste ersetzt.

Mal ganz grob aus'm Kopf:

HTML: 
<img src="Bild1.jpg" id="DasBild" alt="...">
<a href="javascript:ShowPic(CurPicIdx-1);">Zurück</a>
<a href="javascript:ShowPic(CurPicIdx+1);">Weiter</a>

und dann ein JavaScript àla

HTML: 
<script type="text/javascript">
CurPicIdx = 0;

Pictures = Array("Bild1.jpg","Bild2.jpg","Bild3.jpg","Bild4.jpg");

function ShowPic(idx) {
         if (idx<0) idx = 0;
	 if (idx >= Pictures.length) idx = Pictures.length - 1;
         CurPicIdx = idx;
         document.getElementById("DasBild").src = Pictures[idx];
}

</script>

Ist wie gesagt ungetestet, einfach mal so ausm Kopf aufgeschrieben.

Das Preloaden ist dann auch nicht mehr so schwer, dazu musst Du nur für jedes Bild mal ein Image-Objekt erzeugen (new Image()) und das .src zum Bild-URL zuweisen, dann lädt der Browser das. Einfach mal nach "javascript image preloader" googlen.
 
In dem Fall würde ich dann wohl doch auf eine klassische Einbindung zurückgreifen.

Es ginge ohne js in dem Sinne, mittels herkömmlicher Verlinkung jedes Mal eine komplett neue Seite zu laden. Aber das wäre ja Irrsinn.
 
KeinKommentar schrieb:
In dem Fall würde ich dann wohl doch auf eine klassische Einbindung zurückgreifen.

Es ginge ohne js in dem Sinne, mittels herkömmlicher Verlinkung jedes Mal eine komplett neue Seite zu laden. Aber das wäre ja Irrsinn.
Zum Vergrößern anklicken....

Nur mal so als Denkanstoß:

style="overflow:hidden;"

und

<a name="bild1"...

sowie auch

<a href="#bild1"...

So. Nu bastelt euch mal was drauß zusammen.
 
Unobstrusive Javascript, meine Herren.

PHP: 
<a href="#prev" id="prev">Vorheriges</a>
<div id="picContainer">
    <img src="bild1.jpg" alt="Blablub" />
    <img src="bild2.jpg" alt="Blablub2" />
</div>
<a href="#next" id="next">Nächstes</a>

Javascript:

PHP: 
    var container = document.getElementById('picContainer');
    var images = container.getElementsByTagName('img');
    var length = images.length;
    // Nach fertig geladener Seite alle Bilder außer dem ersten ausblenden
    window.onload = function() {
        for(var i = 0; i < length; i++) {
            if(i != 0)
                images[i].style.display = 'none';
        }
    }
    var currentActive = 0;
    document.getElementById('next').onclick = function() {
        currentActive = (currentActive < (length - 1)) ? currentActive + 1 : currentActive;
        for(var i = 0; i < length; i++) {
            images[i].style.display = 'none';
        }
        images[currentActive].style.display = 'inline';
    }
    document.getElementById('next').onclick = function() {
        currentActive = currentActive > 0 ? currentActive - 1 : 0;
        for(var i = 0; i < length; i++) {
            images[i].style.display = 'none';
        }
        images[currentActive].style.display = 'inline';
    }

Ungetestet, aber so in der Art sollte es gehen :) Ein Framework würde das vereinfachen.

Greetz

paddya
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben