Widget:Bild in Bild: Unterschied zwischen den Versionen
Aus FürthWiki
(Die Seite wurde neu angelegt: „<html> <head><title>Test</title> <div style="position:relative;left:50px;height:400px;"> <div id="img1" style="width:600px;height:375px;background-image:url(…“) |
Keine Bearbeitungszusammenfassung |
||
| Zeile 2: | Zeile 2: | ||
<head><title>Test</title> | <head><title>Test</title> | ||
<div style="position:relative;left:50px;height:400px;"> | <div style="position:relative;left:50px;height:400px;"> | ||
<div id="img1" style="width:600px;height:375px;background-image:url(' | <div id="img1" style="width:600px;height:375px;background-image:url('{$Bild1}');position:absolute;left:0px;"></div> | ||
<div id="img2" style="width:600px;height:375px;background-image:url(' | <div id="img2" style="width:600px;height:375px;background-image:url('{$Bild2}');position:absolute;left:0px;"></div> | ||
<img src="border.png" width="10" height="375" style="position:absolute;top:" id="border" /> | <img src="border.png" width="10" height="375" style="position:absolute;top:" id="border" /> | ||
</div> | </div> | ||
Version vom 18. November 2014, 14:11 Uhr
<html> <head><title>Test</title>
<img src="border.png" width="10" height="375" style="position:absolute;top:" id="border" />
<script type="text/javascript"> //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<600){
//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=(600-posx)+"px";
//Und das Trenn-Gradient positionieren
border.style.left=(posx-5)+"px";
}
}
//Um die Tatsächliche Position des Bildes zu finden, müssen wir etwas tricksen. //Die Methode habe ich mit Anregung von http://www.malleus.de/FAQ/getImgMousePos.html gebastelt. 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> </html>
