Etwas mit dem IE-Event .onmove vergleichbares gesucht...

[Matze]

Hallo,
ich suche etwas, was den gleichen Zweck wie das IE-Event "onmove" erfüllt.
Warum? Ich möchte auf einer Seite beliebige Bilder mit abgerundeten Ecken darstellen. Da die runden Ecken mit css noch nicht gehen muss eine "relativ" anständige Lösung her. Eigentlich ist die auch naheliegend.

Nach dem Seitenaufbau enumeriert eine Javascript alle Bilder. Die, die ein bestimmtes Attribut besitzen werden bearbeitet.
Es wird mit offsetWidth, Height, Top & Left die Position und Abmessung des Bildes ermittelt, um dann 4 kleine Bildchen (die runden Ecken, wobei diese innen transparent sind) passend auszurichten (position:absolute).

Soweit sogut. Das funktioniert auch (getestet im ie, ff, chrome & opera).
Nur gibt es ein kleines Problem mit der dynamischen Breite der Seite bzw. mit der Länge von dynamischen Text innerhalb der Seite.

Wenn sich das Bild verschiebt bleiben die 4 Rahmenelemente natürlich da, wo sie am Start hingesetzt wurden.
Das ist etwas blöde.
Der IE kennt das Event onmove (nicht onmousemove, nur onmove), was mir die Sorge abnimmt. Es feuert, wenn sich das Element bewegt. Das klappt hervorragend, nur wie geht das in den anderen Browsern?

Einer eine Idee?

Gruß
Matze

Ach ja - nein, ich möchte kein div um das Bild...

[Cheatah]

Hi,

Warum? Ich möchte auf einer Seite beliebige Bilder mit abgerundeten Ecken darstellen. Da die runden Ecken mit css noch nicht gehen

nur im IE nicht. Alle anderen beherrschen border-radius soweit ich weiß schon recht gut.

Wenn sich das Bild verschiebt bleiben die 4 Rahmenelemente natürlich da, wo sie am Start hingesetzt wurden.

Dann hast Du eine schlechte Struktur erzeugt. Alle diese Elemente gehören zusammen, sollten also in einem Container zusammen gefasst sein.

Ach ja - nein, ich möchte kein div um das Bild...

Das ist Dein Problem, nicht das Deines Problems.

Cheatah

[Matze]

Warum? Ich möchte auf einer Seite beliebige Bilder mit abgerundeten Ecken darstellen. Da die runden Ecken mit css noch nicht gehen

nur im IE nicht. Alle anderen beherrschen border-radius soweit ich weiß schon recht gut.

Nicht das ich wüsste. Es gibt da nur browser-eigene Varianten ala -moz-border-radius oder -webkit-border-radius.

Wenn sich das Bild verschiebt bleiben die 4 Rahmenelemente natürlich da, wo sie am Start hingesetzt wurden.

Dann hast Du eine schlechte Struktur erzeugt. Alle diese Elemente gehören zusammen, sollten also in einem Container zusammen gefasst sein.

Ach ja - nein, ich möchte kein div um das Bild...

Das ist Dein Problem, nicht das Deines Problems.

Hilf aber nichts. Natürlich kann ich ein div oder p gescriptet um das Bild legen. Das funktioniert - und zerhaut mit 100%iger Sicherheit das, was im wysiwyg-Editor vorher eingestellt wurde. Ich würde damit das Problem nur an eine andere Stelle verschieben. In einem Inline-Element geht´s nicht, in einem Block-Element gehts, nur ist das nicht transparent für den Editor.

Ich mach´s jetzt anders. Der IE bekommt die Bilder wie bisher, und der rest bekommt seine eigenen irgendwas-radius-Werte. Sieht zwar nicht identisch aus, aber solange es im IE stimmig aussieht ist´s mir wurscht.

Trotzdem danke

Matze

[apsel]

Om nah hoo pez nyeetz, Matze!

Ich mach´s jetzt anders. Der IE bekommt die Bilder wie bisher, und der rest bekommt seine eigenen irgendwas-radius-Werte. Sieht zwar nicht identisch aus, aber solange es im IE stimmig aussieht ist´s mir wurscht.

Gib gleich border-radius mit an, so brauchst das CSS nicht ändern, wenn künftige IEs oder die anderen ohne Prefix das mal können werden.

Matthias

[Cheatah]

Hi,

nur im IE nicht. Alle anderen beherrschen border-radius soweit ich weiß schon recht gut.
Nicht das ich wüsste. Es gibt da nur browser-eigene Varianten ala -moz-border-radius oder -webkit-border-radius.

Vorab-Implementierungen sind auch Implementierungen. Die "-vendor-property"-Schreibweise ist vom W3C ratifiziert.

Das funktioniert - und zerhaut mit 100%iger Sicherheit das, was im wysiwyg-Editor vorher eingestellt wurde.

Dass Du mit wysiwYg-Editoren arbeitest, solltest Du eventuell auch mal erwähnen. Ich gehe sonst nämlich von einer sinnvollen Struktur aus.

Cheatah

[Matze]

@Cheatah:

Dass Du mit wysiwYg-Editoren arbeitest, solltest Du eventuell auch mal >erwähnen. Ich gehe sonst nämlich von einer sinnvollen Struktur aus.

Wie auch immer du den 2. Satz auch gemeint hast... Natürlich bekommt der, der Beiträge einstellen soll, ein Editor mit normaler HTML-Darstellung an die Hand. Für mich ist das die Regel, alles andere ist eher erwähnenswert.

@Matthias

Gib gleich border-radius mit an, so brauchst das CSS nicht ändern, wenn >künftige IEs oder die anderen ohne Prefix das mal können werden.

Na klar :-). Der IE9 unterstützt border-radius.
Wobei, ich habe mir das gerade mal im Firefox angeschaut. Also bei Bildern sieht das nicht überzeugend aus... Vielleicht lass ich es doch lieber weg, nicht das der IE das nachher auch so macht ;-)

Matze

[Cheatah]

Hi,

Wie auch immer du den 2. Satz auch gemeint hast... Natürlich bekommt der, der Beiträge einstellen soll, ein Editor mit normaler HTML-Darstellung an die Hand. Für mich ist das die Regel, alles andere ist eher erwähnenswert.

Du redest hier in einem technisch orientierten Forum zu einem technischen Themenbereich von Technik, also kann ich von etwas Technischem und somit technisch Sinnvollem ausgehen. Das Erzeugen eines als semantisch definiertem Code durch etwas, das Semantik nicht verstehen kann, fällt nicht in diese Kategorie. wysiwYg-Editoren sind dringend zu vermeiden - es sei denn, Du hast sie im Griff, was laut Deinen Aussagen jedoch nicht der Fall ist.

Cheatah

[Gunnar Bittersmann]

@@Matze:

nuqneH

Da die runden Ecken mit css noch nicht gehen muss eine "relativ" anständige Lösung her. Eigentlich ist die auch naheliegend.

Nach dem Seitenaufbau enumeriert eine Javascript alle Bilder. Die, die ein bestimmtes Attribut besitzen werden bearbeitet.

Es ist anständig und naheliegend, dieses JavaScript per conditional  compilation nur im IE auszuführen. In den anderen Browsern ist dies nicht nötig, schließlich beherrschen die ja runde Ecken mit CSS.

Es wird mit offsetWidth, Height, Top & Left die Position und Abmessung des Bildes ermittelt, um dann 4 kleine Bildchen (die runden Ecken, wobei diese innen transparent sind) passend auszurichten (position:absolute).

Das ist nun weder anständig noch naheliegend. Wozu denkst du Breite, Höhe und Position der Box zu benötigen? Du positionierst die Ecken per 'left: 0; top: 0' links oben, 'right: 0; top: 0' rechts oben, 'left: 0; bottom: 0' links unten, 'right: 0; top: 0' rechts unten. Natürlich nicht bezogen auf den Viewport, sondern bezogen auf die Box, die dazu 'position: relative' verpasst bekommt.

Nur gibt es ein kleines Problem mit der dynamischen Breite der Seite bzw. mit der Länge von dynamischen Text innerhalb der Seite.

Und schon erfreut sich das Problem seiner Nichtexistenz.

Qapla'

[Matze]

Nach dem Seitenaufbau enumeriert eine Javascript alle Bilder. Die, die ein bestimmtes Attribut besitzen werden bearbeitet.

Es ist anständig und naheliegend, dieses JavaScript per conditional  compilation nur im IE auszuführen. In den anderen Browsern ist dies nicht nötig, schließlich beherrschen die ja runde Ecken mit CSS.

Ja, weil die runden Kanten aber echt nicht hübsch werden bekommen nun doch alle Browser Bilder.

Es wird mit offsetWidth, Height, Top & Left die Position und Abmessung des Bildes ermittelt, um dann 4 kleine Bildchen (die runden Ecken, wobei diese innen transparent sind) passend auszurichten (position:absolute).

Das ist nun weder anständig noch naheliegend. Wozu denkst du Breite, Höhe und Position der Box zu benötigen? Du positionierst die Ecken per 'left: 0; top: 0' links oben, 'right: 0; top: 0' rechts oben, 'left: 0; bottom: 0' links unten, 'right: 0; top: 0' rechts unten. Natürlich nicht bezogen auf den Viewport, sondern bezogen auf die Box, die dazu 'position: relative' verpasst bekommt.

Nur gibt es ein kleines Problem mit der dynamischen Breite der Seite bzw. mit der Länge von dynamischen Text innerhalb der Seite.

Und schon erfreut sich das Problem seiner Nichtexistenz.

Manchmal sieht man den Wald vor lauter Bäumen - ihr wisst schon.
Ich hab mir die Antwort ja eigentlich fast selbst gegeben. Inline-Element geht nicht, weil keine feste Breite. Block geht auch nicht, weil es einen Umbruch erzeugt (float ist na klar blödsinn). Ein img ist ein Zwischending so ähnlich wie ein ... inline-block ...
Heureka, manchmal möchte man sich selbst schütteln.
Damit läuft mein Test im IE8 (und Kompatiblitätsansicht), Opera 10.5, Chrome 4.1 und FF 3.63.
Das langt dicke...

Danke nochmal, und tschüs ;-)

[Gunnar Bittersmann]

@@Gunnar Bittersmann:

nuqneH

Noch was:

[…] um dann 4 kleine Bildchen […]

Nein, es ist ein Bild! Dieses wird gespiegelt bzw. gedreht (per Filter).

Es muss nur ein Bild erstellt und vor allem nur eins übertragen werden.

Qapla'