Linuchs: Bildausschnitt bestimmen

Beitrag lesen

habe das jetzt recht umständlich mit Javascript gelöst. Bin aber nicht zufrieden, weil die Methode beim Ändern der Windowsgröße nach dem Laden der Seite versagt.

Aber mit CSS scheint es keine Lösung zu geben.

Falls Javasript ausgechaltet ist, wird nur das Startbild gezeigt, also kein Layout-Problem, da der WEchsel eh nicht stattfindet.

Ich messe erst Breite und Höhe des umschließenden div, dann Breite und Höhe des geladenen Bildes. Daraus errechne ich den negativen Wert für top:

function nxtBild () {  
  // erstes Bild bestimmt die Hoehe  
  if ( bildhoehe == 0 ) {  
    bildhoehe  = document.getElementById("panorama_bild").offsetHeight;  
    bildbreite = document.getElementById("panorama_bild").offsetWidth;  
    document.getElementById("panorama_bild").style.height = bildhoehe + "px";  
//  alert ( "B x H = "+bildbreite+" x "+bildhoehe );  
  }  
  bildzaehler++;  
  if ( typeof arr_panorama[bildzaehler] == "undefined" || arr_panorama[bildzaehler][1] == "" ) bildzaehler = 0;  
  window.clearTimeout( opacity_timer );  // einblenden stoppen  
  document.getElementById( "bild_alt" ).src = document.getElementById( "bild_neu" ).src; // Bild sichern  
  // neues Bild  
  opacity = 0.0;  
  document.getElementById( "bild_neu" ).style.opacity = opacity;  
  // Bild laden  
  var bild = new Image();  
  bild.src = arr_panorama[bildzaehler][1];  
  bild.onload   = function() {  
//  var margin = ( bild.height -200 ) /(-2) +"px";  
    var faktor = bildbreite / bild.width;  // 699 / 768  
    var margin = bild.height *faktor /(-2) +bildhoehe /2 +"px";  
    document.getElementById( "bild_neu" ).style.top = margin;  
    document.getElementById( "bild_alt" ).style.marginTop = margin;  
  }  
  document.getElementById( "bild_neu" ).src = arr_panorama[bildzaehler][1];  
/*  
  if ( bild.height > 200 ) {  
    var margin = '-'+bild.height/2+'px';  
    alert ( margin );  
    document.getElementById( "bild_neu" ).style.top = margin;  
  }  
*/  
  document.getElementById( "panorama_text" ).innerHTML = arr_panorama[bildzaehler][0];  
  nxt_timer = window.setTimeout( "nxtBild ()", 8000 );  
  einblenden();  
}  

Hoffe nur, dass die beiden Zeilen
  var bild = new Image();
  bild.src = arr_panorama[bildzaehler][1];

beim Wiederholen der Bildfolge die Bilder nicht dauernd neu laden.

Linuchs