Mellymaus1975: Erbitte Hilfe bei synchronem Scrollen zweier Divs mit Javascript

SELF-Forum

Erbitte Hilfe bei synchronem Scrollen zweier Divs mit Javascript

Mellymaus1975
– Informationen zu den Bewertungsregeln

Hallo und guten Tag,

nachdem ich nun schon seit Tagen das Internet rauf und runter gesucht habe,
aber leider für mein Problem noch nicht DIE Lösung gefunden habe, frage ich hier mal um Hilfe an.

Folgende Sache möchte ich gern machen:
Man sieht einen Filmstreifen, der durch eine Lupe vergrößert wird.
Es sind 2 Divs mit dem Bild des Filmstreifens. Diese Divs liegen übereinander.
Nun soll der Filmstreifen quasi unter der Lupe durchgezogen werden.

Lösungsansatz:
2 Divs sollen synchron gescrollt werden (Dieses Problem ist bereits gelöst)
Es soll anstelle der Browserseitigen Standard-Scrollbalken jedoch mit
Javascript nur die Up/Down-Buttons generiert werden.

Ich habe einen Code für das synchrone Scrollen gefunden.

Leider reichen meine Kenntnisse noch nicht um den Code so zu erweitern das es mit "selbstgemachten" Scrollbalken/Scrollbuttons funktioniert.

Nun bitte ich Euch um Hilfe...

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Synchron Scroll Test</title>
<style type="text/css">
#Lupe { position: relative; }
#Lupe { width: 500px;height:500px;float: left;border-radius: 251px;border: 1px solid red;
background-repeat: no-repeat;position: absolute; left: 50px; top: -10px;visibility: visible; }
</style>

<script type="text/javascript">
function magnifying() {
document.getElementById('Lupe').style.display='block';}

var Marker = [0,0];

function CS(div1, div2) {
if (!div1 || !div2) return;
var control = null;
if (div1.scrollTop != Marker[0])
control = div1;
else
if (div2.scrollTop != Marker[1])
control = div2;

if (control == null)
return;
else
div1.scrollTop = div2.scrollTop = control.scrollTop;

Marker[0] = div1.scrollTop;
Marker[1] = div2.scrollTop;
}

window.setInterval("CS(document.getElementById('ta1'), document.getElementById('ta2'))", 100);
</script>
</head>

<body onload="magnifying()">
<div id="Lupe" style="position:absolute; top:100px; left:220px; z-index:2;">
<div id="ta1" style="overflow-x: hidden; overflow-y: auto; height: 500px; width: 500px;">
<img src="Filmstreifen.gif" />
</div>
</div>
<div id="Filmstreifen" style="position:absolute; top:10px; left:320px;">
<div id="ta2" style="overflow:hidden; height:650px; width: 272px;"><img id="thumb" src="Filmstreifen.gif"/>
</div>
</div>
</body>
</html>

Grafik: http://s7.directupload.net/file/d/2705/dm7wulh8_gif.htm
(umbenennen in Filmstreifen.gif)

Ein weiteres Problem: leider wird der vergrößerte Filmstreifen nicht in der Lupe (das ist der Kreis, der zu sehen ist), sondern darüber dargestellt. Was habe ich dort falsch gemacht?

Es wäre sehr schön wenn Ihr mir helfen könntet. Leider fehlen mir die Kenntnisse über parent und child, die wohl für das Vorhaben von Nöten sind.

Vielen Dank bereits im Voraus  :-)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Erbitte Hilfe bei synchronem Scrollen zweier Divs mit Javascript

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Liebe Mellymaus1975,

    Es soll anstelle der Browserseitigen Standard-Scrollbalken jedoch mit
    Javascript nur die Up/Down-Buttons generiert werden.

    ganz schlechte Idee. Im Archiv gibt es Begründungen dazu, falls Du die benötigst.

    Liebe Grüße,

    Felix Riesterer.

    --
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln