JavaScript Variable an <img> übergeben

[Maik Fraatz]

Ich habe da mal ein Problem. Ich möchte gerne die höhe und breite meiner frames auslesen, dass funktioniert soweit und anhand dieser werte die größe meiner bilder errechnen. Warum das ganze? Dies tue ich um meine Site an die verschiedenen Auflösungen anzupassen. Also ich bekomme die richtigen pixel werte für den frame und auch die gewünschten pixel werte für das bild errechnet sich wie gewünscht. Ein Problem tritt nun auf bei der Übergabe des Variableninhalts an die <img> parameter width und height. Ich mache bei der Übergabe sicher einen Fehler, aber ich weiß nicht welchen. Vielleicht könnt ihr mir weiterhelfen?

Hier mein Script:

function framepixel() {

iW = innerWidth;
iH = innerHeight;
lh = iH-4;
lb = lh*2,7872860635696821515892420537897;

document.write('innerWidth = ' + iW + '<br>');
document.write('innerHeight = ' + iH + '<br>');
document.write('<span style="position:absolute; left:50%; top:2px; width:326px; height:181px; z-index:1" id="Layer1" align="right"><a href="home.htm" target="mainFrame"><img src="Logo/logo_groner%20kids8.png" width= lh height= lb border="0" /></a></span>');
document.write('logohoch = '+ lh + '<br>');
document.write('logobreit = '+ lb + '<br>');

return
}

also wie gesagt die vars iW, iH, lh, lb erhalten die richtigen bzw. gewünschten werte also liegt da nicht das problem. Das Problem muss also meines erachtens bei der Übergabe liegen.

Gruß
Maik

[Sven Rautenberg]

Moin!

Ich habe da mal ein Problem. Ich möchte gerne die höhe und breite meiner frames auslesen, dass funktioniert soweit und anhand dieser werte die größe meiner bilder errechnen. Warum das ganze? Dies tue ich um meine Site an die verschiedenen Auflösungen anzupassen.

Du meinst, du hast für jede mögliche Kombination aus Höhe und Breite ein eigenständiges Bild vorrätig?

Auch für meine Browserfenstergröße von 1040 * 831 Pixel? Oder (ohne Sidebar, ohne Win-Taskbar auf dem anderen Bildschirm) in 1274 * 884 Pixeln?

Wie kriegst du das hin, ohne dass die Bilder irgendwie pixelig aussehen?

- Sven Rautenberg

[Maik Fraatz]

Moin!

Du meinst, du hast für jede mögliche Kombination aus Höhe und Breite ein eigenständiges Bild vorrätig?

Auch für meine Browserfenstergröße von 1040 * 831 Pixel? Oder (ohne Sidebar, ohne Win-Taskbar auf dem anderen Bildschirm) in 1274 * 884 Pixeln?

Wie kriegst du das hin, ohne dass die Bilder irgendwie pixelig aussehen?

Hierbei handelt es sich ja nicht um große Bilder. Dieses Verfahren möchte ich für meinen Banner und meine Navi anwenden, wo sich lediglich Buttons und Logos finden, wobei das größte Logo bei der von mir maximal optimierten Auflösung 570x204 beträgt und das ist schon halbe originalgröße des Logos also kein Pixelproblem. Nun wird die Framehöhe und -breite ermittelt. Die Breite ist hierbei egal und kann vergessen werden. Nun errechne ich aus der Framehöhe meine Bildhöhe, indem ich einfach sage bitte mach das Bild bzw. Logo um 4 pixel kleiner. Die Breite errechne ich über die Seitenverhätnisse. Wie du oben wahrscheinlich gesehen hast ist das Seitenverhältnis höhe zu breit = 2,7872860635696821515892420537897 um ganz genau zu sein. Somit erreiche ich, dass das Logo nicht verzerrt, gedrunken oder gestreckt wird, da die Verhältnisse erhalten bleiben. Und da das logo bis zu 50% breite meines Banners einnehmen darf wird es hier kein Problem geben und kann vernachlässigt werden.
Aus diesem grund brauche ich auch den definierten Layer um die absolute Position des Logos auf 50% zu setzen, somit steht dem logo wie schon gesagt immer bis zu 50% des Banners zur Verfügung.

Lange Rede kurzer Sinn. Kannst mir auch weiterhelfen?

Gruß
Maik

[Sven Rautenberg]

Moin!

Wie kriegst du das hin, ohne dass die Bilder irgendwie pixelig aussehen?

Hierbei handelt es sich ja nicht um große Bilder. Dieses Verfahren möchte ich für meinen Banner und meine Navi anwenden, wo sich lediglich Buttons und Logos finden, wobei das größte Logo bei der von mir maximal optimierten Auflösung 570x204 beträgt und das ist schon halbe originalgröße des Logos also kein Pixelproblem. Nun wird die Framehöhe und -breite ermittelt. Die Breite ist hierbei egal und kann vergessen werden. Nun errechne ich aus der Framehöhe meine Bildhöhe, indem ich einfach sage bitte mach das Bild bzw. Logo um 4 pixel kleiner.

Und der Browser läßt dann einfach vier Zeilen der 204 Pixelzeilen deines Bildes weg. Anders kann der nämlich nicht skalieren. Und im Verhältnis dazu eben 4 * 2,7... Pixelspalten deiner 570 Pixel Breite. Und wenn du nicht gerade ein dagegen resistentes Motiv hast, dann sieht das unter Umständen ganz schön bescheiden aus.

Lange Rede kurzer Sinn. Kannst mir auch weiterhelfen?

Ja klar. Ich rate davon ab, derartige dynamische Darstellung erlangen zu wollen. Das optische Ergebnis ist es definitiv nicht wert, sondern äußerst mangelhaft.

Wenn du maßstäbliche, bildschirmfüllende, skalierende Darstellung willst, verwende Flash. Die dort mögliche Vektordarstellung erlaubt Skalierung ohne Pixelitis.

Wenn die Flash nicht zusagt, und das Skalieren unbedingt sein soll, verwende relative CSS-Maßeinheiten für die Größenangaben auf deiner Site.

- Sven Rautenberg

[Maik Fraatz]

Moin!

Wenn du maßstäbliche, bildschirmfüllende, skalierende Darstellung willst, verwende Flash. Die dort mögliche Vektordarstellung erlaubt Skalierung ohne Pixelitis.

ich habe mich mal an flash buttons mit dreamweaver versucht und es hat nicht so funktionert wie gewünscht und da ich mit dem quelltext den er mir da hingezaubert nicht viel anfangen konnte habe ich lieber die finger davon gelassen. Es gab nämlich das problem, dass die flashbuttons die verknüpften seiten nicht im mainframe öffnen konnten, sondern nur in eigenen fenster, warum ist mir noch immer ein rätsel.

Wenn die Flash nicht zusagt, und das Skalieren unbedingt sein soll, verwende relative CSS-Maßeinheiten für die Größenangaben auf deiner Site.

ich hab mich auch schon an CSS versucht bezüglich diesem problems. es soll mir ja keiner nachsagen ich sei unflexibel. ;-) aber das ergebnis war aufgrund meiner mangelnden kentnissen von CSS nicht ganz zufriedenstellend.

Gruß
Maik

[Maik Fraatz]

Nachtrag: Die Bilder die ich skalieren möchte lassen dies aufgrund ihrer hohen qualität problemlos zu, dass habe ich schon händisch getestet.

Gruß
Maik

[Sven Rautenberg]

Moin!

Nachtrag: Die Bilder die ich skalieren möchte lassen dies aufgrund ihrer hohen qualität problemlos zu, dass habe ich schon händisch getestet.

Definiere "hohe Qualität". Meinst du "hohe Auflösung"?

Hohe Auflösung geht mit großer Datenmenge einher. Warum Megabytes an Bilddaten runterladen lassen (kostet dich und den Besucher Traffic und Zeit), wenn eine korrekt angepaßte Version viel kleiner und qualitativ hochwertiger ist?

- Sven Rautenberg

[Maik Fraatz]

Moin!

Hohe Auflösung geht mit großer Datenmenge einher. Warum Megabytes an Bilddaten runterladen lassen (kostet dich und den Besucher Traffic und Zeit), wenn eine korrekt angepaßte Version viel kleiner und qualitativ hochwertiger ist?

Das größte Logo hat eine Auflösung von 1140x411 und lediglich 185KB, also somit kein großes Problem.

aber grundsätzlich hast du natürlich recht damit. allerdings ist bei mir so, dass ich mich sehr schwer tue mit flash oder css. was wahrscheinlich auch einfach daran liegt, dass ich nicht die zeit und muße habe mich damit auseinander zu setzen und deshalb bisher krampfhaft an html und javascript festhalte und dort nach brauchbaren und halbwegs praktikabelen lösungen suche.

Gruß
Maik

[Sven Rautenberg]

Moin!

aber grundsätzlich hast du natürlich recht damit. allerdings ist bei mir so, dass ich mich sehr schwer tue mit flash oder css. was wahrscheinlich auch einfach daran liegt, dass ich nicht die zeit und muße habe mich damit auseinander zu setzen und deshalb bisher krampfhaft an html und javascript festhalte und dort nach brauchbaren und halbwegs praktikabelen lösungen suche.

Die einfachste Lösung wäre, einfach zu akzeptieren, dass du auf die Fenstergröße keinen Einfluß hast, und deine Inhalte deshalb einfach unterschiedlich dargestellt werden. Ist halt so. Jede andere Site macht nichts anderes.

185 Kilobyte - soviel Datenmenge sollte keine Startseite insgesamt besitzen (unter 100 KB ist eine gute Richtlinie), und du ballerst das schon allein für irgendeine überdimensionierte Grafik raus.

- Sven Rautenberg

[rfb]

Moin

document.write('<span style="position:absolute; left:50%; top:2px; width:326px; height:181px; z-index:1" id="Layer1" align="right"><a href="home.htm" target="mainFrame"><img src="Logo/logo_groner%20kids8.png" width= lh height= lb border="0" /></a></span>');

hier schreibst du einen String in die Seite. Wenn dieser String sich aus mehreren Einzelstrings zusammensetzen soll, musst du die entsprechend miteinander verknüpfen.
Bsp.

var text="blbla";  
var zahl=7;  
var text2="bla";  
gesamt=text1+zahl+text2;

(ergibt: "blbla7bla"

Die Typumwandlung Zahl in String macht JavaScript netterweise ohne dass dies extra angewiesen werden muss.

Gruß
rfb

[Maik Fraatz]

geht das auch nochmal langsam und ausführlich für die nicht ganz so geübten JavaScript anwender.

Gruß
Maik

[rfb]

Moin

vergleiche die Einbindung von lh hier:
<img src="Logo/logo_groner%20kids8.png" width= lh height= lb border="0" /></a></span>');
und hier:
document.write('logohoch = '+ lh + '<br>');
Unterschied? Genau ein einf. Anführungszeichen und ein pluszeichen davor und dahinter in der 2ten Zeile. Dort wird lh mit dem String verknüft, in der  ersten zeile stehen einfach die Buchstaben lh irgendwo im String.

Noch ausführlicher? Siehe SelfHTML!

Gruß
rfb

[wahsaga]

hi,

geht das auch nochmal langsam und ausführlich für die nicht ganz so geübten JavaScript anwender.

Wenn du zu schnell gelesen hast, lies noch mal langsam.

Wenn du etwas nicht verstanden hast, dann frage bitte _konkret_ nach.

gruß,
wahsaga

[Maik Fraatz]

um nochmal genauer zu erläutern, warum ich mit deiner lösung nicht zurechtkomme. Also das man einzelstrings verknüpfen muss ist mir wohl bewusst, dass habe ich auch bei den anderen strings getan wie du vielleicht siehst, aber bei dem String mit <span> handelt es sich ja um eine verschachtelung von mehreren Tags und keine einzelstrings, also so wie ich das sehe.
wenn sich dort einzelstrings finden, dann sehe ich sie nicht und hab keinen plan wie ich sie verknüfen soll, wenn du mir vielleicht zeigen könntest wo meine einzelstrings sind?

Danke.

Gruß
Maik

[Klawischnigg]

Hi there,

lb = lh*2,7872860635696821515892420537897;

der ist gut ;)

document.write('innerWidth = ' + iW + '<br>');

Du vermengst da javascript mit html. Es macht keinen Sinn, eine Objekteigenschaft wie innerWidth mit document.write in ein html-Dokument zu schreiben, ist in Deinem Fall auch gar nicht nötig.

document.write('[...]<img src="Logo/logo_groner%20kids8.png" width="'+lh+'" height="'+lb+'" border="0" />[...]');

wäre die js-Anweisung Deiner Wahl.

also wie gesagt die vars iW, iH, lh, lb erhalten die richtigen bzw. gewünschten werte also liegt da nicht das problem. Das Problem muss also meines erachtens bei der Übergabe liegen.

Eine Alternative dazu wäre es, dem Bild einen Namen zu geben und dann erst nach dem Laden der Seite die gewünschten Dimensionen zuzuweisen...

[Maik Fraatz]

Danke! Es funktioniert.

Ich hätte nicht gedacht, dass ich das Problem poste und ne kanppe halbe stunde später, das problem schon gelöst ist. Das sprichst für die aktivität der user hier und ihr engagement.

Kompliment und danke dafür.

gruß
Maik