nicht angemeldet
iframe bilder mittig zentrieren
hallo!
bastle gerade an meiner hp und habe das selbe problem wie steve hier: http://forum.de.selfhtml.org/archiv/2007/6/t155171/
ich habe rollover-thumbnails (die noch dazu so aktiv bleiben sollen, bis das nächste geklickt wird) und möchte, dass die bilder bei mausklick in einem iframe geladen werden. die bilder haben dabei nicht alle die gleiche größe und sollen daher mittig zentriert sein.
momentan sieht das ganze so aus:
im html-dokument:
<a href="images/stills/pflanze.jpg" target="ifrm_graphics" class="imgoff" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('pflanze','','images/stills/thumbs/pflanze-a.jpg',1)" onclick="trackClick(this);return true"> <img src="images/stills/thumbs/pflanze-na.jpg" name="pflanze" width="35" height="35" class="imgoff" id="pflanze" /> </a>
<iframe src="whatever.html" name="ifrm_graphics" class="ifrm_graphics"></iframe>
im css steht dann:
.ifrm_graphics {
height: 390px;
width: 580px;
border:none;
background-color: transparent;
position: absolute;
margin: 0px;
padding: 0px;
overflow:hidden;
left: 200px;
top: 0px;
right:0px;
bottom:0px;
text-align:center;
vertical-align:middle;
und im js:
// JavaScript fürs erkennen welchen link man gedrückt hat und diesen markiert lassen bis der nächste link gedrückt wird.
var _active = null;
function trackClick(it) {
if (_active != null)
{_active.className = _active.className.substr(0, 3) + "off";}
_active = it;
ovr(it);
}
function ovr(it) {
it.className = it.className.substr(0, 3) + "on";
}
function out(it) {
if (_active != it)
{it.className = it.className.substr(0, 3) + "off";}
}
// Java von den rollover-bildern
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
hab das alles selbst zusammengebastelt (und das ohne wirklich vorkenntnisse), es kann also sein, dass der ganze code sehr fehlerhaft ist. nichts desto trotz funktioniert alles prima bis eben die geschichte mit dem mittigen zentrieren der bilder, die im iframe geladen werden.
hab das "gesamte" netz durchforscht und wende mich jetzt an euch. hoff ihr könnt mir helfen!
vielen dank!
dani
-
Hellihello
ist dir bewusst, dass die Formatierung im I-Frame in der Datei erfolgt, die im I-Frame geladen ist bzw. dass dort das benötigte CSS bzw. Javascript auch referenziert sein muss.
Dank und Gruß,frankx
-
hi! ja also prinzipiell ist mir das schon bewusst, ja. alle meine seiten haben im header sicherheitshalber sowohl den link zum css als auch zum javascript stehen..
problem bei der iframe geschichte ist ja aber, dass dort gar keine "ganze" seite geladen wird, sondern eben nur ein bild. und dieses bild wiederum ist eigentlich als link definiert.. also nach dem motto: <a href="images/asia/xxx.jpg" target="ifrm_graphics-" usw.
ich weiß nicht wie ich dieses href-bild im iframe mittig zentrieren kann. hab schon versucht nach dem <a href="xxx.jpg" style="vertical-align:middle; text-align:center;" einzufügen, aber da tut sich gar nichts.
dann dachte ich mir vielleicht wärs am gescheitesten, wenn man in den iframe eine seite mit einer tabelle einbettet, in die tabelle zentriert noch ein iframe hineintut, das sich in der größe automatisch an die bilder anpasst und das quasi so löst, aber das geht auch nicht.
ich bin echt ratlos...
-
Hellihello dani,
ich weiß nicht wie ich dieses href-bild im iframe mittig zentrieren kann. hab schon versucht nach dem <a href="xxx.jpg" style="vertical-align:middle; text-align:center;" einzufügen, aber da tut sich gar nichts.
das hat ja mit dem IFrame nix zu tun. Zentrieren eines Bildes horzontal wie vertical:
Entweder (im IFrame-Code) eine Tabelle mit einer Zelle und darin das Bild. Das ist aber unschöne Semantic. Oder aber zB. dem <img> ein display:"block" verpassen, dem body evtl. noch eine height von 100% oder so und dann dem img die passende höhe und breite und dann margin:auto.
Dank und Gruß,
frankx
-
...dem <img> ein display:"block" verpassen, dem body evtl. noch eine height von 100% oder so und dann dem img die passende höhe und breite und dann margin:auto.
hey frankx, ich bin dir ja wirklich dankbar für deine hinweise, aber irgendwie hilft mir das nicht weiter. ich hab einen link und wenn man dort draufklickt soll ein bild in einem iframe geöffnet werden. aber nur das bild, ohne eine neue html seite, weil sonst müsste ich ja jedes bild in eine neue seite einbetten.
das sieht (in etwa) so aus:
<a href="bild.jpg" target="ifram_bild"> da draufklicken um das bild im ifram zu sehen </a>wo meinst du da, dass ich dem <img> ein display:"block" hinzufügen soll? wenn ich zu dem <a href="bild.jpg" style="display:"block" hinzufüge tut sich gar nix..
sorry für meine begriffstützigkeit, aber ich bekomms echt nicht hin!
dani-
Yerf!
hey frankx, ich bin dir ja wirklich dankbar für deine hinweise, aber irgendwie hilft mir das nicht weiter. ich hab einen link und wenn man dort draufklickt soll ein bild in einem iframe geöffnet werden. aber nur das bild, ohne eine neue html seite, weil sonst müsste ich ja jedes bild in eine neue seite einbetten.
Ohne HTML-Datei im Iframe wird das aber leider nichts. Als Alternative zu einer HTML-Datei für jedes Bild könnte man auch eine PHP(oder andere Skriptsprache)-Datei nehmen, die das entsprechende Bild per URL-Parameter bekommt und einbindet.
Evtl. könnte man auch etwas mit JavaScript bauen und den Inhalt des Iframes austauschen (das Bild durch ein Dynamisch erzeugtes HTML-gerüst dass das Bild enthält tauschen).
Noch eine andere Möglichkeit wäre auf den Iframe zu verzichten und die Bilder direkt in die Hauptdatei einzubinden und per JavaScript auszutauschen (hätte aber den Nachteil, das User ohne Javascript nichts mehr sehen).
Gruß,
Harlequin
-
Evtl. könnte man auch etwas mit JavaScript bauen und den Inhalt des Iframes austauschen (das Bild durch ein Dynamisch erzeugtes HTML-gerüst dass das Bild enthält tauschen).
Noch eine andere Möglichkeit wäre auf den Iframe zu verzichten und die Bilder direkt in die Hauptdatei einzubinden und per JavaScript auszutauschen (hätte aber den Nachteil, das User ohne Javascript nichts mehr sehen).
herlequin, super danke, mit der antwort kann ich was anfangen. wenn du mir jetzt verrätst, wie so eine javascript-anweisung aussehen sollte wärst du mein held des tages. wie meine links und java-scrips momentan aussehen ist eh schon in meinem ersten (ursprünglichen)posting drin.
ich könnte natürlich (für den fall, dass das was ich will gar nicht geht) auch jedes bild mit nem weißen hintergrund auf die selbe größe bringen aber pfhhhh.. das möcht ich mir echt ersparen. hoff es gibt ne andere lösung!
dani
ps: könnte ich nicht zb auch das iframe-fenster von der größe des bildes bestimmen lassen und dann in eine tabelle geben und mittig zentrieren?! (da spricht die pure verweiflung aus mir)
soll ich die datei vielleicht mal online stellen, damit man sich bildlich vorstellen kann was ich will?!
-
Yerf!
herlequin, super danke, mit der antwort kann ich was anfangen. wenn du mir jetzt verrätst, wie so eine javascript-anweisung aussehen sollte wärst du mein held des tages. wie meine links und java-scrips momentan aussehen ist eh schon in meinem ersten (ursprünglichen)posting drin.
Hm, mal schnell aus dem Stehgreif, ohne test:
Anstelle des Iframes ein Bild: <img src="erstesbild.jpg" id="graphic" alt="">
und im <a ...> den onclick ändern: onclick="trackClick(this);document.getElementById('graphic').src='neuesbild.jpg';return false;"
außerdem evtl. das target="ifrm_graphics" entfernen (das href aber drinnen lassen, das hat den Vorteil, das user ohne JavaScript trotzdem irgendwie an die Bilder kommen)
ps: könnte ich nicht zb auch das iframe-fenster von der größe des bildes bestimmen lassen und dann in eine tabelle geben und mittig zentrieren?! (da spricht die pure verweiflung aus mir)
Hm, das könnte auch gehen, allerdings weiß ich jetzt nicht genau, wie man auf das Bild im Iframe zugreifen muss, wenn es ohne HTML-Seite geladen wird. Wenn man aber das erst mal hat, kann man die Breite auslesen und am Iframe setzen. Ein Zentrieren des Iframes sollte dann auch ohne Tabelle mittels margin:auto am Iframe gehen.
Gruß,
Harlequin
-
Anstelle des Iframes ein Bild: <img src="erstesbild.jpg" id="graphic" alt="">
und im <a ...> den onclick ändern: onclick="trackClick(this);document.getElementById('graphic').src='neuesbild.jpg';return false;"
außerdem evtl. das target="ifrm_graphics" entfernen (das href aber drinnen lassen, das hat den Vorteil, das user ohne JavaScript trotzdem irgendwie an die Bilder kommen)
ok, also ich hab das mal alles umgeändert, funktioniert aber leider nicht. vermutlich schon allein deswegen weil die navigation (also die kleinen thumbnails) auch in iframes drin sind und ich da zuerst aus den iframe rausverweisen müsst. habs daher einmal ohne target, einmal mit target und parent undeinmal mit target und graphic versucht. hat leider bei deinem der 3 versuche das erstebild.jpg ausgetauscht :(
-
Yerf!
ok, also ich hab das mal alles umgeändert, funktioniert aber leider nicht. vermutlich schon allein deswegen weil die navigation (also die kleinen thumbnails) auch in iframes drin sind und ich da zuerst aus den iframe rausverweisen müsst. habs daher einmal ohne target, einmal mit target und parent undeinmal mit target und graphic versucht. hat leider bei deinem der 3 versuche das erstebild.jpg ausgetauscht :(
Ok, das Problem ist, dass Javascript die frames anders anspricht als ein Link. Deshalb bringt das target hier keine Änderung. Der Ansatzpunct ist 'document' im JavaScript-Aufruf. Hier muss das richtige Dokument angesprochen werden (also dass mit dem Bild).
Wenn das Bild im Hauptdokument und die Links in einem Iframe sind, dann sollte ein parent.document.[...] helfen. Ansonsten bräuchte ich die genaue Framestruktur um zu sagen, wie das genau aussehen muss.
Allerdings ist so eine Verschachtelung von (I)Frames nicht gerade schön und hat auch einige Nachteile (z.B. für Suchmaschienen oder auch beim Bookmarks setzen, weitere sind hier im Forum zur genüge erwähnt). Evtl. wäre es besser die Seiten am Server zusammenzusetzen (z.B. mit SSI oder PHP) anstatt dem Browser lauter Einzelstücke zu geben. Das ist allerdings nicht von Heute auf Morgen umgestellt, sondern eher ein Ziel für die Zukunft...
Gruß,
Harlequin
-
Wenn das Bild im Hauptdokument und die Links in einem Iframe sind, dann sollte ein parent.document.[...] helfen. Ansonsten bräuchte ich die genaue Framestruktur um zu sagen, wie das genau aussehen muss.
ok ok ok ok es funktioniert! die bilder tauschen sich aus! ich hab jetzt dem ersten bild ein class="bild" gegeben und das dann im css dorthingestellt, wo ichs gern haben möcht, das sieht jetzt so aus:
.bild {
border:none;
position: absolute;
margin: 0px;
padding: 0px;
overflow:hidden;
left: 200px;
top: 0px;
right:0px;
bottom:0px;
}aber: jetzt blasen sich alle bilder auf die größe des ersten bildes auf, ich nehm mal an dh. dass ich bei jedem onclick="trackClick(this);parent.document.getElementById('bild').src='images/stills/pflanze.jpg';return false;"> die höhe und breite dazuschreiben muss... nur wie/wo mach ich das genau?!
danke schon mal für die hilfe bis hierher, ich habe wieder hoffnung! : )
-
Allerdings ist so eine Verschachtelung von (I)Frames nicht gerade schön und hat auch einige Nachteile (z.B. für Suchmaschienen oder auch beim Bookmarks setzen, weitere sind hier im Forum zur genüge erwähnt). Evtl. wäre es besser die Seiten am Server zusammenzusetzen (z.B. mit SSI oder PHP) anstatt dem Browser lauter Einzelstücke zu geben. Das ist allerdings nicht von Heute auf Morgen umgestellt, sondern eher ein Ziel für die Zukunft...
hey ich habs geschafft.. hab noch ne tabelle dazugetan und ein paar attribute geändert und siehe da: es ist mittig zentriert!!!! bin schwer begeistert, dank dir vielmals!!!
dani
-
-
-
-
-
-
-
-
-