Overslider-Tool

Mit diesem Tool können zwei gleich grosse Bilder übereinandergeleg und so verglichen werden. Kopiere dazu die URL der Bilder in das Formular und klicke auf «aktualisieren». Das Resultat kann mit den zur Verfgügung gestellten Codes auf einer beliebigen Website eingebunden werden. Die Grösse der Bider sollte so gewählt werden, dass sie der Darstellungsgrösse auf dem Blog oder der Webseite entsprechen.

Das verwendete Scirpt wurde auf der Site sealit.org veröffentlicht.

Input

Output:

iFrame

Javascript / HTML

//CSS  
  //Hole alle Bilder
  var img1 = document.getElementById('img1');
  var img2 = document.getElementById('img2');
  var border = document.getElementById('border');

//Wenn die Maus Ã¼ber dem Bild ist, dann geht's los.
  img1.onmousemove = redraw;
  img2.onmousemove = redraw;
  border.onmousemove = redraw;

function redraw(e){
    posx = e.pageX - findPosX(img1);
    
    //Wenn alles passt, kanns losgehen
    if (posx!=null&&posx>0&&posx<400){
      //Breite des 1ten Bildes anpassen      
      img1.style.width=posx+"px";
      
      //2te Bild anpassen
      img2.style.backgroundPosition=(-posx)+"px";      
      img2.style.left=posx+"px";
      img2.style.width=(400-posx)+"px";
      
      //Und das Trenn-Gradient positionieren
      border.style.left=(posx-5)+"px";
    }

}
  
  
  function findPosX(obj){
  var curleft = 0;
  if(obj.offsetParent)
    while(1){
      curleft += obj.offsetLeft;
      if(!obj.offsetParent)
        break;
      obj = obj.offsetParent;
    }
  else if(obj.x)
    curleft += obj.x;
  return curleft;
}
</script>

Bild 1	Bitte eine gültige URL zum Bild eingeben.
Bild 2	Bitte eine gültige URL zum Bild eingeben.
Höhe
Breite

content-provider.ch

Overslider-Tool

Input

Output:

iFrame

Javascript / HTML