Vorlage:BildGrossZoom
Aus BogenWiki
(Unterschied zwischen Versionen)
Nugman (Diskussion | Beiträge) |
Nugman (Diskussion | Beiträge) |
||
| Zeile 17: | Zeile 17: | ||
</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 id="BogenZoom-</html>{{{Bild}}}<html>" style="display:box;width:100%;height:100px;background-color:green;background-repeat:no-repeat;"></div> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
BogenBild = '</html>{{filepath:{{{Bild}}}.jpg|nowiki}}<html>'; | BogenBild = '</html>{{filepath:{{{Bild}}}.jpg|nowiki}}<html>'; | ||
| Zeile 32: | Zeile 32: | ||
eBogenSmall.width = BogenBildWs; | eBogenSmall.width = BogenBildWs; | ||
eBogenSmall.height = BogenBildHs; | eBogenSmall.height = BogenBildHs; | ||
| - | eBogenSmall.addEventListener('mousemove', | + | eBogenSmall.addEventListener('mousemove', MouseMove); |
| + | eBogenSmall.addEventListener("mousedown", MouseDown); | ||
eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>'); | eBogenZoom = document.getElementById('BogenZoom-</html>{{{Bild}}}<html>'); | ||
eBogenZoom.style.height = BogenBildHs+'px'; | eBogenZoom.style.height = BogenBildHs+'px'; | ||
eBogenZoom.style.backgroundImage = 'url('+BogenBild+')'; | eBogenZoom.style.backgroundImage = 'url('+BogenBild+')'; | ||
eBogenZoom.style.backgroundPosition = '0px 0px'; | eBogenZoom.style.backgroundPosition = '0px 0px'; | ||
| - | function | + | bFollowMouseMove = true; |
| + | function MouseMove(e) { | ||
var x = e.offsetX; | var x = e.offsetX; | ||
var y = e.offsetY; | var y = e.offsetY; | ||
| Zeile 49: | Zeile 51: | ||
var BildY = (y*10-BogenBildHz/2 < 0 ? 0 : (y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : y*10-BogenBildHz/2)); | var BildY = (y*10-BogenBildHz/2 < 0 ? 0 : (y*10+BogenBildHz/2 > BogenBildH ? BogenBildH-BogenBildHz : y*10-BogenBildHz/2)); | ||
eBogenZoom.style.backgroundPosition = '-'+BildX+'px -'+BildY+'px'; | eBogenZoom.style.backgroundPosition = '-'+BildX+'px -'+BildY+'px'; | ||
| + | } | ||
| + | function MouseMove(e) { | ||
| + | bFollowMouseMove = !bFollowMouseMove; | ||
| + | document.getElementById('bFollowMouseMove').innerHTML = (bFollowMouseMove ? 'true' : '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></span> | + | <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> |
</html> | </html> | ||
|-style="background:#E0E0E0" | |-style="background:#E0E0E0" | ||
Version vom 06:51, 11. Jul. 2018
| [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]] | ||
|
| ||
| X = ..., y = ... | ClientWidth = ..., ClientHeight = ..., bFollowMouseMove = ... | ||
| [[{{{Gebiet}}} MiNr. {{{SatzMiNr}}}#Bogen_{{{Bild}}}|Zurück]] | ||
