Variable Grafik auto zur Seitengrösse

[Damug]

hallo,
bin ein blutiger anfänger was JS angeht und wollte eigentlich auch meine 1te Seite (damug.da.funpic.de) weitgehend darauf verzichten.

Der IE macht mir da aber gerade einen Strich durch die Rechnung.

Wenn man sich Bider groß anschauen will ist es im Firefox super geworden, die passen sich flüssig zur Seitengröße an.
Der IE denkt nich mal dran ohne feste width / high Angabe für das Bild es zu registrieren.

Jetzt wollt ich nach diesem Vorschlag hier: http://forum.de.selfhtml.org/archiv/2005/5/t107553/#m668210

das gnze mit JavaScript angehen bekomm das aber mit den SysVars nicht auf die Reihe. ie Muss ih dieses SysVarBody () doc_hight _width in meinen QT einbauen?

kann mir bitte wer versuchen zu helfen. weiß schon nich mehr mit was ich den google noch quälen kann.

[suit]

kann mir bitte wer versuchen zu helfen.

schreibe bitte 100x "ich soll grafiken nicht mit dem browser skalieren" und "mein funpic-webspace ist nicht erreichbar, ich soll richtige links posten" ;)

nein im ernst: grafiken mit dem browser zu skalieren ist wirklich keine gute idee und wenn dir jemand helfen soll, wäre es hilfreich, wenn man deine seite erreichen könnte um sich das ganze anzusehen

[Damug]

nein im ernst: grafiken mit dem browser zu skalieren ist wirklich keine gute idee und wenn dir jemand helfen soll, wäre es hilfreich, wenn man deine seite erreichen könnte um sich das ganze anzusehen

Hast recht, funpic.de ist immo nicht zu erreichen. sorry, find ich selbst nich toll.
Die Url war aber schon richtig:

http://damug.da.funpic.de

Das mit dem Browser skallieren gefällt mir aber echt gut. Sonst müsst ich ja für bald jede Auflösung eine eigene Grafik erstellen.

Andere Möglichkeit die mir auch gut gefällt:

das bild (1800*1600) wird voll geladen aber an die aktuelle Browsergrösse angepasst und ist später durch den mauszeiger, der sich zur lupe beim überfahren der grafik ändert, vergrössert.
Das kenn ich von diesen ganzen netten Mädels die man so im iNet trifft ;-)

Auch hier passt sich das Bild wenn ich mein Browserfenster verkleiner oder vergrößere an.

Leider lässt sich da der Quelltext nicht auslesen, auf den Seiten die ich so gefunden hatte, um draus zu lernen :-(

[Damug]

http://damug.da.funpic.de

funpic ist wieder erreichbar

[Damug]

habe jetzt noch diesen vorschlag gefunden.

http://www.homepage-total.de/javascript/live-resize.php

funktioniert auch siehe beispiel dort.
nur schreibt da keiner wie die width geholt wurde oder was ich im QT fúr mich abzuändern habe.

[suit]

http://www.homepage-total.de/javascript/live-resize.php
funktioniert auch siehe beispiel dort.
nur schreibt da keiner wie die width geholt wurde oder was ich im QT fúr mich abzuändern habe.

funktioniert bei mir mit extrem verspäteter reaktion und sehr fehlerhaft, bild ist dann ausserhalb dem viewport (xp sp2 mit firefox 2, opera 9 und ie7)

zudem siehts äusserst schlimm aus ;)
wenn dir das ding trotzdem gefällt, benutze das script einfach (nach den dort vorgegebenen bestimmungen)

[Damug]

wenn dir das ding trotzdem gefällt, benutze das script einfach (nach den dort vorgegebenen bestimmungen)

ich hab jetzt schon mehrere scripts gefunden nur keine ahnung wie ich sie richtig zur anwendung bringe.

am besten und einleuchtensten kahm mir das script hier von selfHTML aus dem Forum vor: (http://forum.de.selfhtml.org/archiv/2005/5/t107553/#m668210)

code:
JavaScript:
var picWidth=762; picHeight=762;
var maxWidth=762, maxHeight=762;
if(document.images && document.images["bild"] && (doc_width<maxWidth || doc_height<maxHeight) ) {
  var q=Math.min(doc_width/maxWidth,doc_height/maxHeight);
  document.images["bild"].width=Math.ceil(picWidth*q); document.images["bild"].height=Math.ceil(picHeight*q);
}

pic... sind die realen Größen,
max... die maximal erwünschten,
q der Quotient und
doc_... sind Variabe mittels Coding: Systemvariable ermittelt.

Ich hab nur keinen plan wo ich den in meinen QT setzen soll und wie das script zum ermitteln der doc_width ... aussehen muss.

Da wollt ich dass ihr mir bei helft.

[suit]

Ich hab nur keinen plan wo ich den in meinen QT setzen soll und wie das script zum ermitteln der doc_width ... aussehen muss.

Da wollt ich dass ihr mir bei helft.

das macht die sache schon etwas klarer - du hast also das scirpt und willst die breite des viewports/dokuments oder was auch immer ermitteln

window.innerheight
window.innerwidth
document.body.clientheight
document.body.clientwidth
document.documentElement.clientheight
document.documentElement.clientwidth

was du aber eigentlich willst, ist nicht die breite des dokuments sondern die breite des mittleren anzeigebereichs deiner seite

hier wird dir offsetWidth weiterhelfen können

den zweite wert, also die höhe solltest du dir ggf proportional errechnen

[Damug]

was du aber eigentlich willst, ist nicht die breite des dokuments sondern die breite des mittleren anzeigebereichs deiner seite

wenn mein code auszugsweise jetzt so ausschaut:

"...  </script type="text/javascript">
alert(document.all.mitte.offsetWidth);
  </script>
</head>
...
<div style="" class="mitte_big_1" id="mitte">..."

weiss JavaScript sowol bei nutzung des FF als auch IE wie groß der bereich ist?
Und wenn ich das jetzt in die oben gepostete funktion einbinden will, wäre das so richtig?

...</script type="text/javascript">
alert(document.all.mitte.offsetWidth);
var picWidth=762; picHeight=762;
var maxWidth=762, maxHeight=762;
if(document.images && document.images["bild"] && (doc_width<maxWidth || doc_height<maxHeight) ) {
  var q=Math.min(offsetWidth/maxWidth,offsetWidth/maxHeight);
  document.images["bild"].width=Math.ceil(picWidth*q); document.images["bild"].height=Math.ceil(picHeight*q);
}
</script>...

[suit]

wenn mein code auszugsweise jetzt so ausschaut:
"...  </script type="text/javascript">

<script type="text/javascript">

alle sgml-knoten (also auch jene in html) werden mit <element> geöffnet und mit </element geschlossen - nur wenige elemente in html sind davon nicht betroffen (<br> oder <img> zb)

(bevor mir jetzt einer kommt: ja, es gibt kurzschreibweisen die teilweise so kurz sind, dass man die ursprüngliche intention dahinter nicht mehr erkennt)

alert(document.all.mitte.offsetWidth);

scheibe lieber folgendes
document.getElementById('mitte').offsetWidth

weiss JavaScript sowol bei nutzung des FF als auch IE wie groß der bereich ist?

schau dir an, was in dem alert-fensterchen steht und vergleiche alle möglichen browser und die ausgegebenen werte - diese werte notierst du, machst einen screenshot von der seite und misst mit einem grafikprogramm nach, wieviele pixel es wirklich sind - wenn sich alle werte decken, stimmt die sache

Und wenn ich das jetzt in die oben gepostete funktion einbinden will, wäre das so richtig?

nicht ganz, du musst die variablen pic-width

die variablen doc_width und doc_height sind werden offenbar mit maximalbreite und maximalhöhe vergleichen - diese sind bei dir nirgends gesetzt

folgendermaßen solltest du der variable doc_width die entsprechende breite zuweisen können
var doc_width = document.getElementById('mitte').offsetWidth

die höhe brauchst du natürlich auch noch

[Damug]

folgendermaßen solltest du der variable doc_width die entsprechende breite zuweisen können
var doc_width = document.getElementById('mitte').offsetWidth

die höhe brauchst du natürlich auch noch

deine tips helfen mir weiter langsam dahinter zu kommen... vielleicht lern ich ja doch nebenbei noch JS ;)

nur eins hab ich jetzt schon festgestellt, mit offsetWidth / Hight
bekomm ich zwar das Bild angepasst der Anzeigegröße geladen aber wenn ich den Browser wärend des Betrachtens in der größe veränder (liquid design) muss ich ihn erst wieder aktuallisieren sodass erneut die offset Werte ausgelesen und das Bild angepasst wird.

Ich suche jetzt nach einem JS Atribut (oder wie man die dingens like offsetWidth eben nennt) welches die Browsergröße / Auflösung stehts überwacht und Änderungen der Fenstergröße 1:1 mit bekommt...

kann man verstehen was ich meine / suche?

Vielen Dak für die Hilfe bis hier her, hoffe ich geh nicht auf die Nerven.

[suit]

deine tips helfen mir weiter langsam dahinter zu kommen... vielleicht lern ich ja doch nebenbei noch JS ;)

das ist der sinn der sache ;)

Ich suche jetzt nach einem JS Atribut (oder wie man die dingens like offsetWidth eben nennt) welches die Browsergröße / Auflösung stehts überwacht und Änderungen der Fenstergröße 1:1 mit bekommt...

offsetWidth ist eine eigenschaft des des all-objekts

kann man verstehen was ich meine / suche?

ja - ganz klar verstanden und das funktioniert auch:

du suchst den eventhandler http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm@tite=onresize

Vielen Dak für die Hilfe bis hier her, hoffe ich geh nicht auf die Nerven.

auf die nerven gehen mir leute, die nicht wissen was sie wollen und nichtmal versuchen, etwas dafür zu tun ;)

du weisst ja grundlegend, was du willst und wie du es bewerkstelligen könntest - dir fehlt scheinbar nur das wissen und die entsprechenden funktion/methoden die überhaupt zur verfügung stehen

die meisten javascript-funktionen, eventhandler, methoden usw sind mnemonisch - im endeffekt begreifst du beim lesener einer simplen liste sehr schnell, was alles möglich ist

ggf solltest du einfach das javascript kapitel in selfhtml durchsehen

und besonders folgende kapitel überfliegen (überschriften lesen) um bei zukünftigem nachsehen im hinterkopf zu haben, welche dinge es überhaupt gibt
http://de.selfhtml.org/javascript/sprache/eventhandler.htm
http://de.selfhtml.org/javascript/objekte/window.htm
http://de.selfhtml.org/javascript/objekte/document.htm
http://de.selfhtml.org/javascript/objekte/node.htm
http://de.selfhtml.org/javascript/objekte/all.htm

[Damug]

du suchst den eventhandler http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm@tite=onresize

ja ich weiß ganz genau was ich will :D
ich bin niemand der begeistert ist von zwichenlösungen, solange ich weiß, es gibt eine die genau das kann und macht was ich will.

Das schreckliche daran, wenn ich weiß es gibt eine solche Lösung, ich muss sie nur finden, kann ich fast krankhaft nicht davon ablassen bis ich sie hab.

Und der Fall hier fällt genau in dieses Muster LöL

Den OnResize Eventhandler hab ich ein paar minuten vor deinem post gefunden und bin aktuell darn ihn irgendwie mit dem anderen code in verbindung zu bringen.
Das Script dazu, wie es auf der Seite ist, kann ich doch wie ich das sehe ohne Änderung übernehmen? Sollte doch funktionieren.

Und die doc_width docht ich mir jetzt anstatt aus deinem beispiel so anzugeben:
var doc_width = document.getElementById('mitte').offsetWidth

so zu schreiben:
var doc_width = Fensterweite()

um auf die Funktion des OnResize Script zu verweisen, die dies ja ausließt.

Kann sein?

[Damug]

es ist noch viel arbeit, aber schau mal :D

http://damug.da.funpic.de/test.html

[suit]

es ist noch viel arbeit, aber schau mal :D
http://damug.da.funpic.de/test.html

irgendwas wird da noch nicht ganz richtig gerechnet ;)

[Damug]

ich bekomm die rechnung einfach nicht gebacken *grrrrr*

hab mir schon auf selfHTML die Methoden zu "Math" durchgelesen aber komm nicht dahinter was jetzt hier z.B. "math.min(xy/xz,yy/yz)" der "/" zu sagen hat.
vielleicht "im verhältniss zu"?

bin mir sicher in dem satz liegt mein fehler, da ich einfach nicht den richtigen bezug für doc_width/_height zur berechnung finde->

...if(document.images && document.images["bild"] && doc_width<1270 ) {
var q=Math.min(doc_width/pic_width,doc_height/pic_height);
document.images["bild"].width=Math.ceil(doc_width/q); document.images["bild"].height=Math.ceil(doc_height/q);
}
...

kompletter quelltext unter: http://damug.da.funpic.de/test.html

PLZ help

[thebach]

ich bekomm die rechnung einfach nicht gebacken *grrrrr*

hab mir schon auf selfHTML die Methoden zu "Math" durchgelesen aber komm nicht dahinter was jetzt hier z.B. "math.min(xy/xz,yy/yz)" der "/" zu sagen hat.
vielleicht "im verhältniss zu"?

Vielleicht ist es ein Operator ;)

thebach

[Damug]

Vielleicht ist es ein Operator ;)

ja danke :)
kann mir einer sagen ob es eine methode für "math" gibt die einfach das ergebniss liefert?

...document.images["bild"].width=Math.????(800/q); document.images["bild"].height=Math.????(600/q);

[Damug]

ich bin komm damit jetzt danke euch ziemlich gut zurecht, doch find ich einfach keine formel um einen qotienten zu finden der mir später 800*600 (*oder/ eben den qotienten) rechnet um die grafik passend zu skallieren.

hat das jemand drauf? matematiker und JScriptler bitte helft mir.

[suit]

ich bin komm damit jetzt danke euch ziemlich gut zurecht, doch find ich einfach keine formel um einen qotienten zu finden der mir später 800*600 (*oder/ eben den qotienten) rechnet um die grafik passend zu skallieren.

hat das jemand drauf? matematiker und JScriptler bitte helft mir.

du kannst in javascript direkt mit variablen rechnen

var foo = 5
var bar = 2
var baz = foo * bar

sollten in deinen variablen falsche datentypen stehen, bekommst du eine entsprechende fehlermeldung - strings lassen sich mit parseFloat oder parseInt als gleitkommazahl oder als ganzzahl interpretieren

[Damug]

du kannst in javascript direkt mit variablen rechnen

var foo = 5
var bar = 2
var baz = foo * bar

sollten in deinen variablen falsche datentypen stehen, bekommst du eine entsprechende fehlermeldung - strings lassen sich mit parseFloat oder parseInt als gleitkommazahl oder als ganzzahl interpretieren

ich rechne lieber mit den zahlen, da spar ich mir variablen zu erstellen wo es nicht sein muss oder sie die sache erleichtern würden.
mit dem rest was du gepostet hast (strings und perseXY) kann ich leider nichts anfangen.

Auch egal, vielen Dank an dich. Mein script ist soweit dass es meine Wünsche z.Z. erfüllt:

title>Blumen</title>
  <meta content="daniel mugele" name="author">

<link rel="stylesheet" href="../html3/basic.css" type="text/css">

<script type="text/javascript">
function Fensterweite () {
if (window.innerWidth) {
return window.innerWidth;
} else if (document.body && document.body.offsetWidth) {
return document.body.offsetWidth;
} else {
return 0;
}
}
function Fensterhoehe () {
if (window.innerHeight) {
return window.innerHeight;
} else if (document.body && document.body.offsetHeight) {
return document.body.offsetHeight;
} else {
return 0;
}
}
function neuAufbau () {
if (Weite != Fensterweite() || Hoehe != Fensterhoehe())
location.href = location.href;
}
/* Überwachung von Netscape initialisieren */
if (!window.Weite && window.innerWidth) {
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}
  </script>
</head>

<body style="color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);" id="Bildbetrachtung" alink="#66ff99" link="#008800" vlink="#18341b">

<script type="text/javascript">
/* Überwachung von Internet Explorer initialisieren */
if (!window.Weite && document.body && document.body.offsetWidth) {
window.onresize = neuAufbau;
Weite = Fensterweite();
Hoehe = Fensterhoehe();
}
</script> ...

...
<img alt="April2008" id="bild" src="../bilder/Garten/Blumen/April2008-1_800x600.JPG">
<script type="text/javascript">
var doc_width=document.all.Bildbetrachtung.offsetWidth;
var doc_height=document.all.Bildbetrachtung.offsetHeight;
var pic_width=document.all.bild.offsetWidth;
var pic_height=document.all.bild.offsetHeight;
if(document.images && document.images["bild"] && doc_width>1250 ) {
document.images["bild"].width=800; document.images["bild"].height=600;
}
if(document.images && document.images["bild"] && doc_width<1250 ) {
var q=Math.min(doc_width/800)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<1175 ) {
var q=Math.min(doc_width/850)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<1065 ) {
var q=Math.min(doc_width/900)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<1000 ) {
var q=Math.min(doc_width/1000)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<879 ) {
var q=Math.min(doc_width/1025)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<865 ) {
var q=Math.abs(doc_width/1050)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<837 ) {
var q=Math.abs(doc_width/1100)
document.images["bild"].width=Math.ceil(500*q); document.images["bild"].height=Math.ceil(375*q);
}
if(document.images && document.images["bild"] && doc_width<810 ) {
document.images["bild"].width=347; document.images["bild"].height=260;
}

</script>
</body>
</html>

das komplette ergebniss kann unter -> http://damug.da.funpic.de/test.html <-
angesehen werden.
Die Datei werd ich auch für später Hilfesuchende so auf dem Server lassen.

[thebach]

http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm@tite=onresize
                                                                    ^^^^^^^^^^
                                                                  Brustvergrößerung?

the*scnr*bach

[Patrick Andrieu]

Hallo thebach!

http://de.selfhtml.org/javascript/beispiele/fensterueberwachen.htm@tite=onresize
                                                                    ^^^^^^^^^^
                                                                  Brustvergrößerung?

Eher Verstümmelung ;)

Viele Grüße aus Frankfurt/Main,
Patrick