nicht angemeldet
ich befürchte, mein Posting war zu wirr oder zu lang :-(
z.T. ja. Die Beschreibung ist schwer nachvollziebar und ich müßte sie jetzt mehrmals lesen um zu verstehen, was dein Problem sein könnte, wozu ich aber ehrlich gesagt nicht viel Lust habe.
Einfacher wäre es, wenn du eine Beispielseite bauen würdest, wo man das Problem nachvollziehen kann.
Struppi.
Hallo Struppi,
danke Dir für Deine Antwort!
Habe jetzt eine Beispielseite gebaut. Den Code kann man, so wie er ist,
komplett übernehmen, um sich die Sache anzuschauen. Habe alles etwas ver-
einfacht: keine Bilder, nur divs; statt beim draggen .src von Bildern zu ändern,
ändert sich hier die background-color (eine Farbe entspricht in meinem eigentlichen
Code einem Abschnitt des Dia-Streifen-images).
das Javascript habe ich seit gestern schon abgeändert, s.d. es jetzt einiger-
maßen funktioniert - auch wenn es wahrscheinlich alles andere als gut
geschrieben ist...
hier die Beispielseite:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/transitional.dtd">
<html><head><title>Bildauswahl durch drag-drop</title>
<script type="text/javascript">
function IDy(id) {
return document.getElementById(id).style;
}
function ID(id) {
return document.getElementById(id);
}
var dragObjekt = false;
var dragY = 0;
var posY = 0;
var stripY;
var aktuellePos;
var stripDownBusy = false;
var stripUpBusy = false;
document.onmousemove = drag;
document.onmouseup = new Function("dragObjekt=false");
document.onmousedown = new Function("return false"); // FF-internes D&D unterbinden
function dragStart(element) {
dragObjekt = element;
dragY = posY - dragObjekt.offsetTop;
}
function drag(e) {
posY = document.all ? (window.event.clientY + document.body.scrollTop - document.body.clientTop) : e.pageY;
stripY = ID('diaStrip').offsetTop;
if (dragObjekt != false) {
if ((posY - dragY) > 50 && (posY - dragY) < 200) {
dragObjekt.style.top = (posY - dragY) + "px";
}
else if ((posY - dragY) <= 50) {
dragObjekt.style.top = "50px";
if (stripDownBusy == false) {
stripDown();
}
}
else if ((posY - dragY) >= 200) {
dragObjekt.style.top = "200px";
if (stripUpBusy == false) {
stripUp();
}
}
aktuellePos = posY - dragY;
aktualisiereBild();
return false;
}
}
function aktualisiereBild() {
var stripMapTop = new Array(0, 100, 200, 300);
var stripMapBottom = new Array(100, 200, 300, 400);
var bgColors = new Array("blue", "green", "yellow", "orange");
var bild = IDy('bildBox');
for (i=0; i<4; i++) {
if ((dragObjekt.offsetTop - 50) >= (stripMapTop[i] + stripY - 40) && (dragObjekt.offsetTop - 50) <= (stripMapBottom[i] + stripY - 40)) {
bild.backgroundColor = bgColors[i];
}
}
}
function stripDown() {
stripDownBusy = true;
if (dragObjekt == false) {
stripDownBusy = false;
return;
}
stripY = ID('diaStrip').offsetTop;
if (stripY < 0 && aktuellePos <= 50) {
IDy('diaStrip').top = stripY + 2 + 'px';
aktualisiereBild();
setTimeout('stripDown()', 1);
}
else {stripDownBusy = false;}
}
function stripUp() {
stripUpBusy = true;
if (dragObjekt == false) {
stripUpBusy = false;
return;
}
stripY = ID('diaStrip').offsetTop;
if (stripY > -150 && aktuellePos >= 200) {
IDy('diaStrip').top = stripY - 2 + 'px';
aktualisiereBild();
setTimeout('stripUp()', 1);
}
else {stripUpBusy = false;}
}
/*
var imgs = new Array();
function preloadImgs() {
for (i=0;i<10;i++) {
imgs[i] = new Image();
imgs[i].src = "bilder/strip"+(i+1)+".jpg";
}
}
preloadImgs();*/
</script>
<style type="text/css">
#diaStripBox {position: absolute; top: 50px; left: 50px; width: 100px; height: 250px; overflow: hidden; border: 1px solid black;}
#diaStrip {position: absolute; top: 0px; left: 0px; width: 100px; height: 500px;}
#abschnitt1 {height: 100px; background-color: blue;}
#abschnitt2 {height: 100px; background-color: green;}
#abschnitt3 {height: 100px; background-color: yellow;}
#abschnitt4 {height: 100px; background-color: orange;}
#diaRahmen {position: absolute; top: 170px; left: 45px; width: 110px; height: 100px; border: 3px solid grey; cursor: move; z-index: 2;}
#bildBox {position: absolute; top: 50px; left: 250px; width: 300px; height: 300px; border: 3px solid black; background-color: green;}
</style>
</head><body>
<div id="diaStripBox">
<div id="diaStrip">
<div id="abschnitt1"></div>
<div id="abschnitt2"></div>
<div id="abschnitt3"></div>
<div id="abschnitt4"></div>
</div>
</div>
<div id="diaRahmen" onmousedown="javascript:dragStart(this)"></div>
<div id="bildBox"></div>
</body></html>
Struppi