problem mit javascript

[noxTo]

problem mit selbstgehackter javascript funktion

also meine ersten gehversuche in javascript gestalten ishc doch recht schwierig :(

ich habe eine funktion die ein bild um 180 grad dreht. diese will ich auf mehrere blder anwenden. das problem ist vermutlich für den versierten scripter ersichtlich.
wenn ich bild a um 180 grad drehe und dann auf bild b klicke um es um 180 grad zu drehen springt das bild um 180 grad um sich dann nocmals um 180 grad zu drehen da ja die zaehlvariable bereitst auf 180 grad steht vom klick auf bild a(hoffe das ist verständlich).

es kann doch nicht empfehlenswert sein für 2 bilder die selbe funktion 2 mal zu schreiben mit abgeaenderten variablennamen oder?

thx im voraus

 

[threadi]

Du hättest dir auch einen besseren Topictitel aussuchen können, Probleme haben viele die hier posten

Dein Problem könnte jedoch erst ersichtlich werden, wenn Du auch den von dir verwendeten Quellcode verrätst?!

 

[noxTo]

mir is nix eingefallen :)
setzt mich gleich ma an den apfel der quellcode ist da auf der platte.

 

[noxTo]

so jetzt mal der code

das bild

<div style="moz-transform:  rotate();" onclick="rotateYDIV('1.1')">
  <img src="0.jpg" id="1.1" />
</div>

die funktion

var y,ny=0,rotYINT

function rotateYDIV(id)
{
    y=document.getElementById(id)
    clearInterval(rotYINT)
    rotYINT=setInterval("startYRotate()",10)
}

function startYRotate(id)
{
    ny=ny+1
    y.style.MozTransform="rotateY(" + ny + "deg)"
    if(ny==90)
    {
    document.images['1.1'].src = "1.jpg"
    }
    
    if(ny==270)
    {
    document.images['1.1'].src = "0.jpg"
    }
  
    if (ny==180 || ny>=360)
    {
        
        clearInterval(rotYINT)
        if (ny>=360)
        {
            ny=0    
        }
  }
}

so wenn ich nun ein zweiten container nehme und mit der selben funktion aufrufe ist das bild bereits gedreht und dreht zurück. warum das so ist ist mir klar aber wie kann ich das lösen?
wie gesagt für jedes bild ne eigene funktion ist nicht gerade die traumlösung denke ich.

 

[threadi]

Ändere die ID des Elements. Diese enthält momentan eine Zahl am Anfang, was nicht zulässig ist. Besser setzt Du einfach noch einen Buchstaben vorne dran.

Dann müsstest Du eigentlich nur den Funktionsaufruf

    rotYINT=setInterval("startYRotate()",10)

ändern, z.B. zu

rotYINT=window.setInterval(function() { startYRotate(id) }, 10);

Dadurch übergibst Du die zu verwendende ID an die Funktion, die das Element rotieren soll. Und innerhalb von startYRotate musst Du diese ID dann nur noch an den entsprechenden Stellen anstelle der jetzt vorhandenen festen ID einfügen.

 

[omoxen]

es ist möglich, HTML-Elementen JavaScript Eigenschaften zu geben:


var el = document.getElementById("id);
el.rotation += 180;

Außerdem fällt mir noch einiges in deinem Code auf:
Du solltest das Semikolon schon setzten,
verwende Lokale variablen mit "var",
bei setInterval würde ich die Funktion und keinen Eval-String angeben, außerdem immer eine Millisekunde: window.setInterval(startYRotate, 1);
Animationen sollten so wie du sie geschrieben hast eigentlich nicht ablaufen. Mach irgendwie so:

var t = (new Date).getTime(),
rot = function(r){
el.style.MozTransform = "rotateY(" + r + "deg)";
return r;
},
intval = window.setInterval(function() {
if(rot(start + 5 * Math.sqrt((new Date).getTime() - t) >= 360) {
rot(start += 180);
window.clearInterval(intval);
}
}, 1);

Also, du solltest die Animation an der Zeit orientieren, dann stockt es nicht. Außerdem sollte sie nicht linear verlaufen (Deshalb Math.sqrt). Die Werte solltest du vielleicht noch anpassen, habs auch nicht getestet.

Bei onclick musst du nicht die ID übergeben. Du kannst auch einfach "rotateYDIV(this);" schreiben (und dann auch "var el = el.children[0];")

Es wäre hier eigentlich angebracht, jQuery zu benutzen. Das würde deinen Code sehr reduzieren und übersichtlicher gestalten.

 

[noxTo]

danke werde es ausprobieren.