Persönliche Werkzeuge

Vorlage:BildGrossZoom

Aus BogenWiki

(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
Zeile 18: Zeile 18:
</html>
</html>
|align="left"|<html>
|align="left"|<html>
-
<div id="BogenZoom-</html>{{{Bild}}}<html>" style="display:box;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div>
+
<div id="BogenZoom-</html>{{{Bild}}}<html>" style="display:box;cursor:pointer;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div>
<script type="text/javascript">
<script type="text/javascript">
   // Dateiname des Bildes ermitteln.
   // Dateiname des Bildes ermitteln.
Zeile 37: Zeile 37:
   eBogenSmall.width = BogenBildWs;
   eBogenSmall.width = BogenBildWs;
   eBogenSmall.height = BogenBildHs;
   eBogenSmall.height = BogenBildHs;
-
   eBogenSmall.addEventListener('mousemove', MouseMove);
+
   eBogenSmall.addEventListener('mousemove', MouseMoveSmall);
-
   eBogenSmall.addEventListener("mousedown", MouseDown);
+
   eBogenSmall.addEventListener("mousedown", MouseDownSmall);
   // Originalbild anzeigen
   // Originalbild anzeigen
   eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>');
   eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>');
Zeile 44: Zeile 44:
   eBogenZoom.style.backgroundImage = 'url('+BogenBild+')';
   eBogenZoom.style.backgroundImage = 'url('+BogenBild+')';
   eBogenZoom.style.backgroundPosition = '0px 0px';
   eBogenZoom.style.backgroundPosition = '0px 0px';
 +
  eBogenZoom.addEventListener('mousemove', MouseMoveZoom);
 +
  eBogenZoom.addEventListener('mousedown', MouseDownZoom);
 +
  eBogenZoom.addEventListener('mouseup',  MouseUpZoom);
   // Overlay für Rahmen im Thumbnail anzeigen
   // Overlay für Rahmen im Thumbnail anzeigen
   eBogenSmallOverlay = document.getElementById('BogenSmallOverlay-</html>{{{Bild}}}<html>');
   eBogenSmallOverlay = document.getElementById('BogenSmallOverlay-</html>{{{Bild}}}<html>');
Zeile 49: Zeile 52:
   eBogenSmallOverlay.style.top = BogenSmallRect.y;
   eBogenSmallOverlay.style.top = BogenSmallRect.y;
   eBogenSmallOverlay.style.left = BogenSmallRect.x;
   eBogenSmallOverlay.style.left = BogenSmallRect.x;
-
   eBogenSmallOverlay.addEventListener('mousemove', MouseMove);
+
   eBogenSmallOverlay.addEventListener('mousemove', MouseMoveSmall);
-
   eBogenSmallOverlay.addEventListener("mousedown", MouseDown);
+
   eBogenSmallOverlay.addEventListener('mousedown', MouseDownSmall);
   // Ausschnitt soll der Mausbewegung folgen
   // Ausschnitt soll der Mausbewegung folgen
-
   bFollowMouseMove = true;
+
   bFollowMouseSmall = true;
 +
  bFollowMouseZoom = false;
   // Callback fuer Mausbewegung im Thumbnail
   // Callback fuer Mausbewegung im Thumbnail
-
   function MouseMove(e) {
+
   function MouseMoveSmall(e) {
     e.preventDefault();
     e.preventDefault();
     e = e || window.event;
     e = e || window.event;
-
     /*get the x and y positions of the image:*/
+
     // Get the x and y positions of the image:
     var a = eBogenSmall.getBoundingClientRect();
     var a = eBogenSmall.getBoundingClientRect();
-
     /*calculate the cursor's x and y coordinates, relative to the image:*/
+
     // Calculate the cursor's x and y coordinates, relative to the image:
     var x = e.pageX - a.left;
     var x = e.pageX - a.left;
     var y = e.pageY - a.top;
     var y = e.pageY - a.top;
-
     /*consider any page scrolling:*/
+
     // Consider any page scrolling:
     x = x - window.pageXOffset;
     x = x - window.pageXOffset;
     y = y - window.pageYOffset;
     y = y - window.pageYOffset;
-
     document.getElementById('BogenBildX').innerHTML = x;
+
     document.getElementById('BogenSmallXY').innerHTML = x+'/'+y;
-
    document.getElementById('BogenBildY').innerHTML = y;
+
     document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight;
-
     document.getElementById('ClientWidth').innerHTML = eBogenZoom.clientWidth;
+
     if (bFollowMouseSmall) {
-
    document.getElementById('ClientHeight').innerHTML = eBogenZoom.clientHeight;
+
-
     if (bFollowMouseMove) {
+
       var BogenBildHz = eBogenZoom.clientHeight;
       var BogenBildHz = eBogenZoom.clientHeight;
       var BogenBildWz = eBogenZoom.clientWidth;
       var BogenBildWz = eBogenZoom.clientWidth;
Zeile 86: Zeile 88:
   function MouseDown(e) {
   function MouseDown(e) {
     // Mauszeiger folgen/nicht folgen umschalten
     // Mauszeiger folgen/nicht folgen umschalten
-
     bFollowMouseMove = !bFollowMouseMove;
+
     bFollowMouseSmall = !bFollowMouseSmall;
-
     document.getElementById('bFollowMouseMove').innerHTML = (bFollowMouseMove ? 'true' : 'false');
+
     document.getElementById('bFollowMouseSmall').innerHTML = (bFollowMouseSmall ? 'true' : 'false');
-
     if (bFollowMouseMove) MouseMove(e);
+
     if (bFollowMouseSmall) MouseMove(e);
 +
  }
 +
  // Callback fuer Mausbewegung im Originalbild
 +
  function MouseMoveZoom(e) {
 +
    e.preventDefault();
 +
    e = e || window.event;
 +
    // Get the x and y positions of the image:
 +
    var a = eBogenZoom.getBoundingClientRect();
 +
    // Calculate the cursor's x and y coordinates, relative to the image:
 +
    var x = e.pageX - a.left;
 +
    var y = e.pageY - a.top;
 +
    // Consider any page scrolling:
 +
    x = x - window.pageXOffset;
 +
    y = y - window.pageYOffset;
 +
    document.getElementById('BogenZoomXY').innerHTML = x+'/'+y;
 +
    document.getElementById('ZoomClientWidthHeight').innerHTML = eBogenZoom.clientWidth+'/'+eBogenZoom.clientHeight;
 +
    if (bFollowMouseZoom) {
 +
      var BogenBildHz = eBogenZoom.clientHeight;
 +
      var BogenBildWz = eBogenZoom.clientWidth;
 +
      var BildZoomX = (x < 0 ? 0 : (x > BogenBildWz ? BogenBildWz : x));
 +
      var BildZoomY = (y < 0 ? 0 : (y > BogenBildHz ? BogenBildHz : y));
 +
      // Overlay im Thumbnail verschieben
 +
      eBogenSmallOverlay.style.top = ''+(a.top+BildZoomY/10+window.pageYOffset)+'px';
 +
      eBogenSmallOverlay.style.left = ''+(a.left+BildZoomX/10+window.pageXOffset)+'px';
 +
      eBogenSmallOverlay.style.height = ''+(eBogenZoom.clientHeight/10)+'px';
 +
      eBogenSmallOverlay.style.width = ''+(eBogenZoom.clientWidth/10)+'px';
 +
    }
 +
  }
 +
  // Callback fuer das Druecken der linken Maustaste im Originalbild
 +
  function MouseDownZoom(e) {
 +
    // Mauszeiger folgen/nicht folgen umschalten
 +
    bFollowMouseZoom = true;
 +
    document.getElementById('bFollowMouseZoom').innerHTML = 'true';
 +
  }
 +
  // Callback fuer das Loslassen der linken Maustaste im Originalbild
 +
  function MouseUpZoom(e) {
 +
    // Mauszeiger folgen/nicht folgen umschalten
 +
    bFollowMouseZoom = false;
 +
    document.getElementById('bFollowMouseZoom').innerHTML = 'false';
   }
   }
</script></html>
</script></html>
|-style="background:#000000"
|-style="background:#000000"
|align="left" colspan="2"|<html>
|align="left" colspan="2"|<html>
-
<span style="color:white">X = <span id="BogenBildX">...</span>, y = <span id="BogenBildY">...</span> | ClientWidth = <span id="ClientWidth">...</span>, ClientHeight = <span id="ClientHeight">...</span>, bFollowMouseMove = <span id="bFollowMouseMove">...</span></span>
+
<span style="color:white">Small.X/Y = <span id="BogenSmallXY">...</span> | Zoom.X/Y = <span id="BogenZoomXY">...</span> | Zoom.ClientWidth/Height = <span id="ZoomClientWidthHeight">...</span> | bFollowMouseSmall = <span id="bFollowMouseSmall">...</span>, bFollowMouseZoom = <span id="bFollowMouseZoom">...</span></span>
</html>
</html>
|-style="background:#E0E0E0"
|-style="background:#E0E0E0"

Version vom 21:26, 12. Jul. 2018

 [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]]
Small.X/Y = ... | Zoom.X/Y = ... | Zoom.ClientWidth/Height = ... | bFollowMouseSmall = ..., bFollowMouseZoom = ...
 [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]]
Von „https://nugman.info/bogenwiki/index.php?title=Vorlage:BildGrossZoom“