nicht angemeldet
Bildgröße auslesen und damit Fenster öffnen
0 0 0 Ups...
0 0
Bildgröße auslesen und damit Fenster öffnen
Hallo !
Nachdem ich es erfolglos mit PHP versucht habe frage ich jetzt noch mal in der Javascript-Rubrik. :-)
Und zwar würde ich gerne bei einem Klick auf einen Link ein Fenster öffnen lassen und in diesem eine Bilddatei anzeigen. Das Fenster soll mit der Größe des Bilder geöffnet werden. Hört sich ganz einfach an, nur bin ich zu blöd dafür.
Ich hätte als gerne eine Funktion an die man einfach nur den Namen des Bildes über einen Link übergeben muss [ <a href="#" onClick=zeigebild("Name") ]. Die Funktion schaut dann im Verzeichnis ../pics/ nach der Datei mit dem Namen.jpg, ermittelt Höhe und Breite des Bildes und öffnet das Fenster mit diesen Angaben.
Wie muss die Funktion zeigebild(); aussehen damit genau diese Funktion erfüllt wird?
Ich habe leider von JavaScript soviel Ahnung wie eine Kuh vom Mäusemelken. :-(
Kann mir da eventuell jemand helfen??
Vielen Dank !!
Gruß
Thorsten
-
Hallo !
Ebenfalls.
Die Funktion schaut dann im Verzeichnis ../pics/ nach der Datei mit dem Namen.jpg, ermittelt Höhe und Breite des Bildes und öffnet das Fenster mit diesen Angaben.
Das geht mit JavaScript nicht.
Wie muss die Funktion zeigebild(); aussehen damit genau diese Funktion erfüllt wird?
Wie gesagt, mit JavaScript kann man keine Dateiinformationen auslesen, aber ich hab vor einiger Zeit mal en Script gebastelt, das das macht, was du willst, du musst jedoch Breite und Höhe des Bildes mitangeben:
<html>
<head>
<title>image_popup</title>
<script type="text/javascript" language="JavaScript">
<!--
function show_image(img_name,img_source,img_width,img_height)
{
display_image = window.open("","_blank","width=" + img_width + ",height=" + img_height + ",location=no,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no");
display_image.document.open("text/html");
display_image.document.writeln("<html>");
display_image.document.writeln("<head>");
display_image.document.writeln("<title>" + img_name + "</title>");
display_image.document.writeln("</head>");
display_image.document.writeln("<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style="margin:0px;">");
display_image.document.writeln("<img src="" + img_source + "" alt="" + img_name + "" width="" + img_width + "" height="" + img_height + "" border="0">");
display_image.document.writeln("</body>");
display_image.document.writeln("</html>");
display_image.document.close();
}
//-->
</script>
</head>
<body>
<h2>Bilder aus SELFHTML</h2>
<a href="http://selfhtml.teamone.de/grafik/anzeige/fotos/foto4.jpg" target="_blank" onClick="show_image('Foto','http://selfhtml.teamone.de/grafik/anzeige/fotos/foto4.jpg','600','480'); return false">Foto</a><br>
<a href="http://selfhtml.teamone.de/grafik/anzeige/cliparts/clip02.gif" target="_blank" onClick="show_image('Clipart','http://selfhtml.teamone.de/grafik/anzeige/cliparts/clip02.gif','100','143'); return false">Clipart</a><br>
<a href="http://selfhtml.teamone.de/grafik/anim_gif2.gif" target="_blank" onClick="show_image('Animated Gif','http://selfhtml.teamone.de/grafik/anim_gif2.gif','150','150'); return false">Animated Gif</a><br>
<br>
<tt>Linkschema: <a href="Dateiname" target="_blank" onClick="show_image('Name des Bilds','Dateiname','Breite','Höhe'); return false">Verweistext</a></tt>
</body>
</html>Kann mir da eventuell jemand helfen??
ISCH!
Gruß
Norbert-
Vielen Dank für die ausführliche Antwort!
Das mit der Angabe von Höhe und Breite wollte ich unbedingt vermeiden. Bei vielen Bildern ist das nämlich sehr umständlich immer erst zu gucken wie groß ein Bild ist.
Aber ich dachte das mit dem Auslesen der Bildgröße würde mit Javascript funktionieren. Siehe dazu auch:
http://selfhtml.teamone.de/javascript/objekte/images.htm#width
bzw.
http://selfhtml.teamone.de/javascript/objekte/images.htm#heightGruß
Thorsten-
Hallo.
Aber ich dachte das mit dem Auslesen der Bildgröße würde mit Javascript funktionieren. Siehe dazu auch:
http://selfhtml.teamone.de/javascript/objekte/images.htm#width
bzw.
http://selfhtml.teamone.de/javascript/objekte/images.htm#heightStimmt schon, nur kann man Breite und Höhe nicht auslesen, ohne dass das Bild in der Datei angezeigt wird.
Aber versuch's mal damit, ich hab's ein bissel angepasst:<html>
<head>
<title>image_popup-v2</title>
<script type="text/javascript" language="JavaScript">
<!--
function show_image(img_name,img_source)
{
display_image = window.open("","_blank","location=no,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no");
display_image.document.open("text/html");
display_image.document.writeln("<html>");
display_image.document.writeln("<head>");
display_image.document.writeln("<title>" + img_name + "</title>");
display_image.document.writeln("</head>");
display_image.document.writeln("<body marginwidth="0" marginheight="0" topmargin="0" leftmargin="0" style="margin:0px;" onload="window.resizeTo(eval(document.images[0].width+24),eval(document.images[0].height+36))">");
display_image.document.writeln("<div align="center"><img src="" + img_source + "" alt="" + img_name + "" border="0"></div>");
display_image.document.writeln("</body>");
display_image.document.writeln("</html>");
display_image.document.close();
}
//-->
</script>
</head>
<body>
<h2>Bilder aus SELFHTML</h2>
<a href="http://selfhtml.teamone.de/grafik/anzeige/fotos/foto4.jpg" target="_blank" onClick="show_image('Foto','http://selfhtml.teamone.de/grafik/anzeige/fotos/foto4.jpg'); return false">Foto</a><br>
<a href="http://selfhtml.teamone.de/grafik/anzeige/cliparts/clip02.gif" target="_blank" onClick="show_image('Clipart','http://selfhtml.teamone.de/grafik/anzeige/cliparts/clip02.gif'); return false">Clipart</a><br>
<a href="http://selfhtml.teamone.de/grafik/anim_gif2.gif" target="_blank" onClick="show_image('Animated Gif','http://selfhtml.teamone.de/grafik/anim_gif2.gif'); return false">Animated Gif</a><br>
<br>
<tt>Linkschema: <a href="Dateiname" target="_blank" onClick="show_image('Name des Bilds','Dateiname'); return false">Verweistext</a></tt>
</body>
</html>Sobald das Bild geladen wurde, wird die Größe des Fensters angepasst, das funktioniert aber erst ab Version 4 der Browser, weil resizeTo() JavaScript 1.2 ist.
Gruß
Norbert-
Hallo Norbert.
Stimmt schon, nur kann man Breite und Höhe nicht auslesen, ohne dass das Bild in der Datei angezeigt wird.
Ist natürlich dumm.
Aber versuch's mal damit, ich hab's ein bissel angepasst:
Vielen Dank. Das werde ich gleich noch einmal ausprobieren. Ich habe ja noch bis 4:00 Uhr Zeit. :-)
Sobald das Bild geladen wurde, wird die Größe des Fensters angepasst, das funktioniert aber erst ab Version 4 der Browser, weil resizeTo() JavaScript 1.2 ist.
Damit kann ich leben. Ich kenne niemanden mehr mit einer 3er Version. Wie sieht es denn mit dem Konquerer unter Linux aus?
Gruß
Thorsten-
Hi,
Aber versuch's mal damit, ich hab's ein bissel angepasst:
Vielen Dank. Das werde ich gleich noch einmal ausprobieren. Ich habe ja noch bis 4:00 Uhr Zeit. :-)
Ich glaube nicht, dass das funktioniert. Dürfte IMO nämlich nur ge-
hen, wenn Höhe/Breite definiert sind, und das sind sie ja nicht als
Attribut, sondern nur browserintern, weil es der Browser aus dem
Bild ausgelesen hat ...Sobald das Bild geladen wurde, wird die Größe des Fensters angepasst, das funktioniert aber erst ab Version 4 der Browser, weil resizeTo() JavaScript 1.2 ist.
Damit kann ich leben. Ich kenne niemanden mehr mit einer 3er Version. Wie sieht es denn mit dem Konquerer unter Linux aus?
Also wie gesagt, ich nehme an, dass es ohnehin nicht geht. Sollte
es aber gehen, geht es sicher auch mit Konqueror.Bye,
Peter-
Hallo.
Aber versuch's mal damit, ich hab's ein bissel angepasst:
Vielen Dank. Das werde ich gleich noch einmal ausprobieren. Ich habe ja noch bis 4:00 Uhr Zeit. :-)
Ich glaube nicht, dass das funktioniert. Dürfte IMO nämlich nur ge-
hen, wenn Höhe/Breite definiert sind, und das sind sie ja nicht als
Attribut, sondern nur browserintern, weil es der Browser aus dem
Bild ausgelesen hat ...Ich hab's bei folgenden Browsern ausprobiert:
Internet Explorer 1.5: kann kein JS
Internet Explorer 3: kennt resizeTo nicht
Internet Explorer 6: geht
Netscape 1.22: kann kein JS
Netscape 2.02/3.01/3.03: kennen resizeTo nicht
Netscape 4.03/4.07/4.50/4.78/6.2.1: geht
Mozilla 0.9.8: geht
Opera 2-4: geht nich
Opera 5.01/5.12: Bild wird nicht geladen
Opera 6.00/6.01: gehtDes Weiteren, können der NS6 und Mozilla die Bildgröße ebenfalls auslesen, man muss nur warten, bis die Seite geladen wurde, also onload.
Wenn man das Beispiel http://selfhtml.teamone.de/javascript/objekte/anzeige/images_height.htm etwas abändert, geht's auch im NS6:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body onload="window.alert(document.Christa.name + '\n' + document.Christa.width + ' x ' + document.Christa.height + ' Pixel')">
<img src="http://selfhtml.teamone.de/javascript/objekte/anzeige/christa.gif" name="Christa" alt="Christa">
</body>
</html>Gruß
Norbert-
Hallo !
Also ich habe es einmal ausprobiert und bin ganz zufrieden.
Man muss nur darauf auchten beim Opera das Öffnen neuer Fenster durch die Website zu erlauben. Das bringt natürlich einen Nachteil für die User mit die diese Funktion deaktiviert haben.
Kann man das beim Opera irgendwie abfragen?Opera 5.01/5.12: Bild wird nicht geladen
Das ist seltsam. Es handelt sich doch um einen ganz normalen <img>-Tag. Da ich nur den 6er habe kann ich es leider nicht ausprobieren.
Was mir aber noch Probleme bereitet ist die Größe und Position des Fensters.
-
Obwohl die Höhe ja definiert wird habe ich beim NN4 unterhalb der Grafik noch viel Platz im Fenster. Bei IE6 hingegen ist der Rahmen fast direkt an der Grafik.
-
Der Opera6 öffnet das Fenster immer in der rechten unteren Ecke des Bildschrims. Und das obwohl ich bei Öffnen left=1,top=1 angegeben habe.
Das bekomme ich aber hoffentlich auch noch hin.
Gruß
Thorsten-
Man muss nur darauf auchten beim Opera das Öffnen neuer Fenster durch die Website zu erlauben. Das bringt natürlich einen Nachteil für die User mit die diese Funktion deaktiviert haben.
Ja, aber die haben sicher einen Grund dafür, genauso wie Leute, die JS deaktiviert haben.
Opera 5.01/5.12: Bild wird nicht geladen
Das ist seltsam. Es handelt sich doch um einen ganz normalen <img>-Tag. Da ich nur den 6er habe kann ich es leider nicht ausprobieren.
Hier sollte aber jetzt der Preload helfen ;-)
function show_image(img_name,img_source)
{
// Preload
preload=new Image();
preload.src=img_source;
...Allerdings hat Opera bei JS einfach Macken...
Was mir aber noch Probleme bereitet ist die Größe und Position des Fensters.
- Obwohl die Höhe ja definiert wird habe ich beim NN4 unterhalb der Grafik noch viel Platz im Fenster. Bei IE6 hingegen ist der Rahmen fast direkt an der Grafik.
s. dazu das Posting von Norbert http://forum.de.selfhtml.org/?m=33638&t=6012:
"das einige Browser bei resizeTo() die äußere Fenstergröße ändern, andre die Innere. Und für die, die die Äußere ändern is das +24 und +32."- Der Opera6 öffnet das Fenster immer in der rechten unteren Ecke des Bildschrims. Und das obwohl ich bei Öffnen left=1,top=1 angegeben habe.
versuche es mal mit screenX=/screenY _und_ left/top wie in meinem Script. http://www.clemens-gruber.de/computer/goodies/fotosession/code.php
Clemens
-
-
-
-
-
-
-
-
Hallo !
Nachdem ich es erfolglos mit PHP versucht habe frage ich jetzt noch mal in der Javascript-Rubrik. :-)
Warum erfolglos? Das geht prima! Naja, um ein neues Fenster zu öffnen brauch man natürlich noch JS ;-) Aber die Bildgröße kann man sehr einfach mit PHP auslesen:
GetImageSize("foto.jpg");
und dann mit
echo "$imageSize[0],$imageSize[1]";
liefert Breite, Höhe, z.B. 60,40oder
echo $imageSize[3];
liefert gleich die HTML-Angaben (width/height)
mit, z.B. width="60" height="40"wieder ausgeben
siehe auch http://www.selfphp3.de/funktionsreferenz/image_funktionen/getimagesize.php
Und zwar würde ich gerne bei einem Klick auf einen Link ein Fenster öffnen lassen und in diesem eine Bilddatei anzeigen. Das Fenster soll mit der Größe des Bilder geöffnet werden. Hört sich ganz einfach an, nur bin ich zu blöd dafür.
Schau Dir das mal an, wenn Du Webspace mit PHP hast ist es genau das was Du suchst:
http://www.clemens-gruber.de/computer/goodies/fotosession/Ich habe den von Norbert geposteten Code übrigens mal mit Netscape 4.7 ausprobiert, leider geht es nicht.
Aber mit einem Preload kann man dem Ding etwas auf die Füße helfen:
function show_image(img_name,img_source)
{
// Preload
preload=new Image();
preload.src=img_source;display_image = window.open("","_blank","location=no,menubar=no,resizable=yes,scrollbars=no,status=no,toolbar=no");
display_image.document.open("text/html");
(...)Man ist aber immer noch darauf angewiesen, dass das Bild zuerst geladen wird. Ausserdem sind die Parameter width+24 height+36 scheinbar browserspezifisch.
Clemens
-
$imageSize = GetImageSize
muss es natürlich heisen, wenn man es mit dem Array $imageSize später auslesen will
-
Hallo.
Ich habe den von Norbert geposteten Code übrigens mal mit Netscape 4.7 ausprobiert, leider geht es nicht.
Bei mir schon (Netscape 4.78).
Man ist aber immer noch darauf angewiesen, dass das Bild zuerst geladen wird.
Richtig, deshalb ist die Version, die ich als erste geposted hab ja auch die bessere, d.h. solange man bereit ist, die Bildgröße mit anzugeben.
Ausserdem sind die Parameter width+24 height+36 scheinbar browserspezifisch.
Sin sie nich. Das Problem is nur, das einige Browser bei resizeTo() die äußere Fenstergröße ändern, andre die Innere. Und für die, die die Äußere ändern is das +24 und +32.
Gruß
Norbert-
Hi Norbert!
Bei mir schon (Netscape 4.78).
Ja, stimmt, bei mir jetzt auch <peinlich>hatte ich da kurzfristig mal JS deaktiviert</peinlich> ;-)
Richtig, deshalb ist die Version, die ich als erste geposted hab ja auch die bessere, d.h. solange man bereit ist, die Bildgröße mit anzugeben.
Ja, ganz klar, wenn man das angeben will, wenn nicht ist ja immer noch die PHP-Version möglich.
Ausserdem sind die Parameter width+24 height+36 scheinbar browserspezifisch.
Sin sie nich. Das Problem is nur, das einige Browser bei resizeTo() die äußere Fenstergröße ändern, andre die Innere. Und für die, die die Äußere ändern is das +24 und +32.
Gut, oder auch nicht, weil das Probelem noch das gleiche ist, man müsste dann je nach Browser die Werte addieren oder nicht.
Clemens
-
Hallo Clemens!
Richtig, deshalb ist die Version, die ich als erste geposted hab ja auch die bessere, d.h. solange man bereit ist, die Bildgröße mit anzugeben.
Ja, ganz klar, wenn man das angeben will, wenn nicht ist ja immer noch die PHP-Version möglich.Und jetzt würde ich mich riesig freuen, wenn Du mir die PHP Lösung mitteilen könntest. :-)
Gruß
Thorsten-
Hat sich erledigt. :-)
-
-
-
-
Hallo !
Warum erfolglos? Das geht prima! Naja, um ein neues Fenster zu öffnen brauch man natürlich noch JS ;-) Aber die Bildgröße kann man sehr einfach mit PHP auslesen:
Jaja. Das ist mir bekannt...
GetImageSize("foto.jpg");
...aber genau da liegt das Problem.
Der PHP-Code wird ja vom Server ausgewertet. Wenn
der User die Website im Browser sieht enthält diese
ja keinen PHP Code mehr der diesen Klick auswerten
könnte. Ich müsste also bei einem Klick erst wieder
eine PHP Datei Öffnen und dieser mit ?name=xxx den
Bildnamen übergeben. Aber ich könnte natürlich mit
Javascript das Fenster öffnen und anstatt mit den
Javascript Befehlen mit PHP die Größe auslesen um
dann mit Javascript die Fenstergröße zu verändern.
Werde ich auch einmal ausprobieren.Ja, so möchte ich das gerne haben.
Gruß
Thorsten
-