onload-Attribut vermeiden

[Christophe]

Hallo,

ich benutze das onload-Attribut bei img-Tags, um auf einer Seite mit variabler Breite die Bilder immer mit korrekter Breite anzuzeigen, um zu verhindern, dass Bilder gestaucht werden:

Code: Alles auswählen

<script type="text/javascript">
function resize51&#40;&#41; &#123;
	newsrc = "bild.php?id=51&x="+ &#40;document.getElementById&#40;"main"&#41;.offsetWidth-32&#41;;
	document.getElementById&#40;"img51"&#41;.setAttribute&#40;"src", newsrc&#41;;
	document.getElementById&#40;"img51"&#41;.setAttribute&#40;"onload", ""&#41;;
&#125;
</script>
<img id="img51" src="bild.php?id=51&x=572" alt="" onload="javascript&#58;resize51&#40;&#41;;" />

Der Code funktioniert mit allen neueren Browser, nur leider hat der img-Tag nach XHTML 1.1 kein onload-Attribut, das gibt es nur für den body-Tag.

Fällt jemand eine valide Lösung ein?

Gruß,
Christophe

[shapeshifter]

lass die height und width attribute einfach im img-tag weg - dann wird auch nix gestaucht.......

[Christophe]

Es geht darum zu verhindern, dass Browser die Bilder selbst skalieren, das muss in diesem Fall der Qualität wegen serverseitig passieren.

[shapeshifter]

dann schreib die funktion so, dass du mit onload im body-tag alle bilder auf einmal skalieren kannst

[flproject]

XHTML 1.1 ist zur Zeit noch gar nicht anwendbar, es sei denn du kannst auf IE-Besucher verzichten. XHTML 1.1 muß mit dem MIME-Typ "application/xhtml+xml" ausgeliefert werden, und den versteht der IE nicht. Nimm XHTML 1.0, oder noch besser HTML 4.01.

[Christophe]

shapeshifter: Genau deshalb hab ich hier doch einen Beitrag geschrieben

flproject: Das betrifft auch XHTML 1.0

[flproject]

Das betrifft auch XHTML 1.0

ja, bzw. kann XHTML 1.0 auch als "text/html" ausgeliefert werden, sollte es aber imho nicht. nimm deswegen einfach HTML 4.01, es sei denn du nutzt XML-Sachen wie SVG usw.

Falls sich dein "das betrifft..." auf das onload-attribut bezieht:

pack deine funktion in ein externes script und ans Ende des Skripts:

Code: Alles auswählen

window.onload = function() { resize51(); };

[/code]

[Christophe]

Danke, aber meinen Doctype wollte ich hier nicht diskutieren.

Das Problem ist doch etwas komplizierter, da ich vorher nicht weiß, welche Bilder mit welcher Id auf einer Seite stehen werden. Ich arbeite mit einem Redaktionsystem, es gibt extra Templates für die Bilder. Deshalb habe ich bisher auch mit o.g. Code gearbeitet. Ich kann aus dem Bild-Template natürlich nicht irgendwo im Dokument rumschreiben. Okok, ich hätte das ganze etwas genauer schildern sollen:

Meiner Vorstellung nach springt das Script durch alle Bilder im Dokument, wenn es eine bestimmte Eigentschaft hat (class=...?) dann wird der Inhalt der Funktion von oben ausgeführt. Dieses Skript kann bei jedem Seitenaufruf geladen werden und wenn es Bilder zum Ändern gibt, passiert was, sonst nicht.

Edit: Hätte ich mir deinen Beitrag genauer angucken sollen. Genau so funktioniert es, danke.

[DcadNc3]

wo kommen denn die bilder her?

für mich macht es den anschein, dass sie aus ner db kommen und somit könnte man das ja auch per php machen und einfach die richtigen img werte reinschreiben. dazu müsste man ggf im ie ein div oder eine tabelle machen, die genau die breite des bildes hat. so verhindert man das "kleinrechnen" der browser.