Scriptaculous Effect Hilfe

FaFoo

Hi,

http://92.228.195.49/coding/DeMi/er…cs/inserat.html

Es geht um die Tuse da auf weißem Hintergrund, wie der Effekt gewünscht ist, ist glaub ich klar, oder?
Der Effekt funktioniert soweit ganz gut, solange man mit der Maus nicht über den Textbereich auf der Grafik kommt.
Jemand ne Ahnung woran das ligen könnte?

HTML

<a class="inserat" href="#" onmouseover="inserateMouseOver('1');" onmouseout="inserateMouseOut('1');">
                    <div id="thumb1">
                        <img src="img/inserate/100/inserat_thumb_100_1.jpg" alt="Inserat 1">
                        <div>&nbsp;Tina</div>
                    </div>
                    <img id="shade1" class="shade" src="img/inserate/100/inserat_thumb_shade_100_1.jpg" alt="Inserat 1" />
                </a>

Code

/* < INSERAT */
.inserat {
    width:           138px;
    display:         block;
    text-decoration: none;
    float:           left;
    margin:          5px;
}


.inserat div div {
    color:       #FFFFFF;
    width:       138px;
    height:      20px;
    background:  url(../img/inserate/thumb.text.bg.png);
    font-size:   10px;
    line-height: 20px;
    z-index:     100;
    position:    relative;
    top:         -20px;
    float:       left;
}


.inserat .shade {
    position: relative;
    top:      -19px;
}
/* INSERAT > */

Alles anzeigen

PHP

function inserateMouseOver(id) {
    new Effect.Move('thumb'+id,{x : 0,y : -3 , duration:0.2});
    new Effect.Move('shade'+id,{x : 0,y : 3 , duration:0.2});
}


function inserateMouseOut(id) {
    new Effect.Move('thumb'+id,{x : 0,y : 3 , duration:0.2});
    new Effect.Move('shade'+id,{x : 0,y : -3 , duration:0.2});
}

Afrael

Oh, was für die Augen B)
Ich hab den negativen Effekt, dass die Bilder auseinandergleiten, in Firefox 3.0.9 übrigens nur, wenn ich meine Maus über dem "Spiegelbild" rauf- und runter bwege, vll hilft dir das weiter?

FaFoo

HM... ne hilft mir leider auch nicht weiter...

Das Problem ist ja, dass der das mouseover scheinbar "verliert" wenn man die Maus an bestimme stellen bewegt.

Tja.... vielleicht hat ja noch jemand ne Idee...

crAzywuLf

hmm der Link geht nicht mehr...

FaFoo

Hab die Sachen mal hoch geladen und den Link oben aktualisiert.

Grevas

http://www.scriptaculous.de/effect-move

probier mal das letzte Beispiel aus, klick mehrmals drauf - genau das selbe Problem hast du

da Versetzung in beiden Fällen relativ ist - verschiebt sich das Bild dauerhaft fals der Effekt 2 (oder mehr) mal getriggert wird während der duration.

FaFoo

Naja, das ist mir schon klar. Die Frage ist aber, wieso wird der Effekt mehrmals getriggert?
Der Effekt sollte vom Mouseover des umschließenden Links ausgelöst werden. Wenn ich aber die Maus über bestimmte Bereiche bewege, wie z.B. die Schrift, scheint das als Mouseout interpretiert zu werden. Warum?

Grevas

Wenn du sagen wir mal auf das bild fährst, es mit auf und ab bewegungen mehrmals triggerst gibts eben den effekt: +3 beim runterfahren -1 ... trigger +3 ... usw. da kommt eben mehr als 0 raus. Beim seitlichen Triggern ist der Effekt umgekehrt. Probier jetzt doch einfach mal statt

new Effect.Move('shade'+id,{x : 0,y : -3 , duration:0.2});

benutze einfach mal eine absolute anweisung:

new Effect.Move('shade'+id,{ x: 0, y: 0, mode: "absolute", queue: "end", duration: 0.2});

Was das Queue in dem Fall bewirkt weiß ich jetzt nicht, da ich mir jetzt das ganze nirgends einbinden werde musst du es ausprobieren

Bewirkt letztendlich genau den Effekt den du haben möchtest - nur eben ohne die Probleme dabei. Hab mir noch paar andere Sachen auf der Seite angeschaut und es passiert bei mehreren Effekten die vorgestellt werden.

Die einzige Lösung dieses Problem zu beheben die mir einfällt ist eine boolean Variable die beim Auslösen gesetzt und erst beim rollover entfernt wird. In JS kann man bestimmt auch timer basteln und das ganze dann so zusammenbauen das die Effekte nur ausgelöst werden wenn der andere bereits zu Ende ist. Aber das ergibt wieder das Problem - wenn zu früh das rollover vorkommt bleibt der Effekt hängen. Deshalb würde ich es erstmal mit "mode: absolute" probieren

Bei spielereien sieht es halt nicht so top aus (würde abgehackt wirken), aber da ist man eben selbst Schuld.

/P.S: zu der Frage warum es mehrmals getriggert wird... Der Trigger ist dein Bild - es bewegt sich weg, wenn man die Maus dabei bewegt (runter vom Bild) ist das halt ein Auslöser für dein Script, wenn man dann wieder drüber fährt nochmal.. usw.

/und nochwas... : Versuch mal dem div in dem der Name steht mal auch ein rollover zu verpassen, der nichts macht. Überlappungen und Rollover effekte haben so ihre eigenarten...
Was einem alles zu so einem kleinen script einfallen kann <div> ist eigentlich kein inline element soweit ich das verstanden hab - deshalb bugts auch beim rollover *vermut* - komplizierter Lösungsvorschlag: Wasserzeichen mit PHP.

Tags