Spiegelbilder Scripte 2/ Mirror image scripts 2

Spiegelbilder / mirror images ein Spiegel für die eigene hompage /a mirror for your own hompage

Einfacher Spiegel

Das drag and drop habe ich so von selfhtml übernommem - vielen Dank! http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/
Für den Spiegel fand ich hier wichtige Anregung - vielen Dank! http://www.jjam.de/JavaScript/Grafik_Effekte/Clipping.html

Bild austauschen: ganz unten bei div id="bild" und div id ="spiegel" im gleichfarbigen Bereich. Das Bild kann beliebig groß sein.
Verschieben von Bild und Spiegel: nur bei id="grund". Bild und Spiegel sind da reingepackt (gleichfarbigen Bereich).
Größe des Spiegels ändern: bei den Variablen "lang" und "breit", bei id="spiegel" im clip und bei "id="rahmen" height und width (gleichfarbigen Bereich)
Rahmenstärke und Rahmenfarbe: bei den Variablen "rah" und "rah2" und bei " id="rahmen" (gleichfarbigen Bereich). Bei id="rahmen" kann auch ein Vollrahmen bestimmt werden: einfach die doppelte Weite und für border-right eine positive Zahl.
Auch die Anfangsposition des Spiegels kann neu bestimmt werden ist aber weniger leicht: die erste und dritte Zahl im clip vom id="spiegel" bestimmt y-Position und Höhe, die zweite und vierte Zahl x-Position und Weite. Auch der Rahmen muß angepasst werden. Dabei muß die Rahmenstärke beachtet werden.

Simple Mirror

The drag and drop I have so of selfhtml übernommem - thank you! http://aktuell.de.selfhtml.org/artikel/javascript/draganddrop/
In the mirror I found this important suggestion - thank you! http://www.jjam.de/JavaScript/Grafik_Effekte/Clipping.html code

swap Image: at the very bottom div id = "bild" and div id = mirror in the same color range. The image can be arbitrarily large.
Moving image and mirror: only with id = "grund". Image and mirror are packed in there (same color range).
Change size of the mirror: for the variables "lang" and "breit", at id = "spiegel" in the clip and "id ="rahmen" height and width (same color range)
Border width and border color: for the variables "rah" and "rah2" and "id ="rahmen" (same color range) When id ="rahmen" can also be a full frame are determined: simply double the width and border-right is a positive number.
The initial position of the mirror can be resized but is less easy: the first and third number in the clip from the id = "spiegel" determined the y-position and altitude, the second and fourth number x position and width. The frame must be adjusted. The frame thickness must be considered.

So sieht es aus:
It looks like this:

und hier das Script dazu:
Das Bild "kraut.jpg" dazu einfach kopieren und zu dem Script in den gleichen Ordner packen, oder gleich ein eigenes Bild einfügen wie oben beschrieben.

and here the script to:
Simply copy the picture "kraut.jpg" and pack to the scripts in the same folder or equal to insert your own image as described above.

<!DOCTYPE html>
<html>
  <head>
    <title>Spiegel 2</title>
    <script language="JavaScript">

//drag and drop

  //Das Objekt, das gerade bewegt wird.
  var dragobjekt = null;

  // Position, an der das Objekt angeklickt wurde.
  // relativ zur oberen, rechten Ecke des Objekts
  var dragx = 0;
  var dragy = 0;

  // Mausposition
  // relativ zur oberen, rechten Ecke des Fensters
  var posx = 0;
  var posy = 0;

var rah=-8;//rahmendicke vertikal - kann verändert werden, thick vertical frame - can be changed
var rah2=-4;//rahmendicke horizontal - kann verändert werden, thick horizontal frame - can be changed
var lang=140;//länge des spiegels - kann verändert werden, length of the mirror - can be changed
var breit=70;//breite des spiegels - kann verändert werden, width of the mirror - can be changed
 

  function draginit() {

   // Initialisierung der Überwachung der Events
    document.onmousemove = drag;
  //document.onmousedown = drag;
    document.onmouseup = dragstop;
  }

  function dragstart(element) {
     //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
     //Parameter element: Das zu bewegende Objekt.

    dragobjekt = element;
    dragx = posx - dragobjekt.offsetLeft;
    dragy = posy - dragobjekt.offsetTop;
  }

  function dragstop() {
    //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
    dragobjekt=null;
  }

//drag and drop
  function drag(ereignis) {
    //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
    posx = document.all ? window.event.clientX : ereignis.pageX;
    posy = document.all ? window.event.clientY : ereignis.pageY;
    if(dragobjekt != null) {

      dragobjekt.style.left = (posx - dragx) + "px";
   dragobjekt.style.top = (posy - dragy) + "px";
  

//Spiegel 

document.getElementById("spiegel").style.left=2*( posx -dragx+breit-rah) + "px";

document.getElementById("spiegel").style.clip="rect("+(posy- dragy-rah2)+ "px"+" "+
(2*breit+posx- dragx-rah)+ "px"+" "+(posy- dragy+lang-rah2)+ "px"+" "+(breit+posx- dragx -rah)+ "px"+")";
    }
  }
</script>

 
 </head>
 <body onload="draginit()">



hier eigenen Text einfügen:
Insert own text here:

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx





<div id="grund" style="position:absolute; top:100px; left:170px; height:0px; width:0px;">

<div id="bild" style="position:absolute; top:0px; left:0px; height:0px; width:0px; 
   background-color:#FFCC66;"> <img src="kraut.jpg"></div>

<div id="spiegel" style="position:absolute; top:0px; left:0px; width:0px; height:0px; 
   clip:rect(0px, 70px, 140px, 00px);transform: scale(-1,1);index: 20;"><img src="kraut.jpg" >
   </div> 

<div onmousedown="dragstart(this);" id="rahmen" style="position:absolute; top:-4px; left:-70px;
   height:140px; width:70px;  border-top: black 4px solid;border-bottom: black 4px solid;
   border-right:black 0px solid; border-left:black 8px solid;">  </div> </div>


</body>
</html>