Ausgetauschtes Bild wird beschnitten dargestellt

[rocksteady]

Hallo allerseits

Ich habe diese Frage schon in anderen Foren gestellt, habe aber leider nie eine Antwort erhalten. Ich hoffe Ihr könnt mir dabei auf die Sprünge helfen..

Ich erstelle zur Zeit eine kleine Homepage für einen Freund von mir und wollte auf der Teamsite alle Personen verlinken. Beim hover über den Namen wird mittels jquery eine neue src in das headerimage-feld geschrieben.
Das Austauschen der Bilder funktioniert eigentlich einwandfrei, jedoch werden die animierten gifs, die geladen werden, beschnitten dargestellt.

Nun suche ich die Quelle für das Problem. Die animierten gifs kann ich ausschliessen, da ich das bereits mit anderen animierten dateien probiert habe und es sich dort gleich verhält.

Hat jemand von Euch eine Idee ob das ein JS oder ein jquery-Problem ist oder dies gar mit dem Browser zu tun hat? (verhält sich unter IE genauso wie auf FF)

Das aktuelle Beispiel finder Ihr auf der Homepage. Die ist noch nicht fertig, das Problem ist dort aber bereits sichtbar.

Der Code sieht ungefähr so aus:

   1. $(function(){  
   2.     $(".link1").mouseover( function(){  
   3.         $('.imagefield').attr('src', '/drupal/sites/default/files/link1.gif');  
   4.         $('.imagefield').attr('height', '350');  
   5.     });  
   6.     $(".link2").mouseover( function(){  
   7.         $('.imagefield').attr('src', '/drupal/sites/default/files/link2.gif');  
   8.         $('.imagefield').attr('height', '350');  
   9.     });  
  10.     $(".imagefieldlink").mouseout( function(){  
  11.         $('.imagefield').attr('src', 'http://www.orthomeier.ch/drupal/sites/default/files/Blume.jpg');  
  12.         $('.imagefield').attr('height', '500');  
  13.     });  
  14. });

~~~html

1. <img class="imagefield imagefield-field_image" src"headerimage.jpg" />
      2. <a href="#" class="link1">link1</a>
      3. <a href="#" class="link2">link2</a>

  
Ich wäre unendlich dankbar wenn jemand seine Meinung dazu äussern könnte.  
  
lg  
Manuel

[Novi]

Hallo,

Das Austauschen der Bilder funktioniert eigentlich einwandfrei, jedoch werden die animierten gifs, die geladen werden, beschnitten dargestellt.

Dieses Problem, dass nur die obere Hälfte vom Bild wechselt, sehe ich nur im Firefox. In Opera, Safari und IE funktioniert es.

Mir ist jedoch aufgefallen, dass sich die Größe der Seite ändert, da ganz am Anfang auch die Größe des Bildes geändert wird. Dadurch können sich die Links verschieben, sodass es zu einem "flackern" kommt. Vielleicht entstehen dadurch ja auch Probleme beim Rendern durch die Browser.

Also solltest du die Größe der Seite einfach mal festlegen. Du kannst dem Elternelement des Bild ja einfach eine feste Größe geben, in der auch die größeren Bilder reinpassen.

Ansonsten würde ich die Seite mal auf das wesentliche reduzieren, um an das Problem eingrenzen zu können.

Viele Grüße Novi

[rocksteady]

Hallo,

Das Austauschen der Bilder funktioniert eigentlich einwandfrei, jedoch werden die animierten gifs, die geladen werden, beschnitten dargestellt.

Dieses Problem, dass nur die obere Hälfte vom Bild wechselt, sehe ich nur im Firefox. In Opera, Safari und IE funktioniert es.

Mir ist jedoch aufgefallen, dass sich die Größe der Seite ändert, da ganz am Anfang auch die Größe des Bildes geändert wird. Dadurch können sich die Links verschieben, sodass es zu einem "flackern" kommt. Vielleicht entstehen dadurch ja auch Probleme beim Rendern durch die Browser.

Also solltest du die Größe der Seite einfach mal festlegen. Du kannst dem Elternelement des Bild ja einfach eine feste Größe geben, in der auch die größeren Bilder reinpassen.

Ansonsten würde ich die Seite mal auf das wesentliche reduzieren, um an das Problem eingrenzen zu können.

Viele Grüße Novi

Wow, vielen Dank erstmal für die Rückmeldungen!!

Stimmt, die site hat noch keine minimale höhe, das werd ich heute Abend ändern.
Die Bilder werden im Endeffekt alle gleich hoch sein, zur Zeit sind alle Bilder nur zu testzwecken eingebaut.

Auch die Darstellung der Links werde ich noch verändern und dazwischen mehr Platz schaffen, damit sollte das weniger "hektisch" rüberkommen. Zudem habe ich mir überlegt die gifs einfaden zu lassen, das sollte dann auch ein wenig ruhiger wirken.

Ich meld mich dann wieder zurück sobald das umgesetzt ist, vielleicht hilft das ja schon, ansonsten probier ich mal die Bilder für den FF vorab in den Cache zu laden :D

@cygnus: Hehe, das stimmt schon, aber in diesem kieferorthopädishchen Labor gibt es keine Behandlungen. Hier werden lediglich die Geräte hergestellt, die dann vom Zahnarzt eingesetzt werden :)

lg
manuel

[cygnus]

Hallo :)

Ich erstelle zur Zeit eine kleine Homepage für einen Freund von mir und wollte auf der Teamsite alle Personen verlinken. Beim hover über den Namen wird mittels jquery eine neue src in das headerimage-feld geschrieben.

Kieferorthopädie ...
das ist ja eine nette Idee, ein Foto der Person zu zeigen, die einen mal betreuen wird, wenn man als Patient/Kunde in die Praxis kommt.
Aber der ständige Austausch der Bilder wirkt sehr zappelig, lenkt vom Lesen der Informationen über die Praxis ab, die ein Patient - möglicherweise mit heftigen Beschwerden am Kauapparat und deshalb eingeschränktem Humor - aufnehmen will.

Also mir würde ein freundliches, ruhiges Foto ausreichen ...
aber das hat jetzt natürlich nichts mit Deinem Bilderproblem zu tun.

mfg
cygnus

[Beat]

Also mir würde ein freundliches, ruhiges Foto ausreichen ...

Was die Identifizierung von Antennen am Kopf und gewisser Objekte im Hintergrund natürlich nicht erleichtert und desto mehr aufregt.

mfg Beat

[cygnus]

Hallo :)

Was die Identifizierung von Antennen am Kopf und gewisser Objekte im Hintergrund natürlich nicht erleichtert und desto mehr aufregt.

Ein Gedächtnis wie ein Elefant ..

mfg
cygnus