Hintergrundposition bei MouseOver ändern

[Durek]

Beim Bild da oben sollerst so angezeigt werden, dass das Linke zuerst angezeigt wird und bei Mouseover verschoben wird als hintergrund)

 

[tomx992]

äh sorry, sollen wir dir hier jetzt das bild noch auseinanderschneiden und dann den code servieren??? :evil:

1. mach zwei bilder draus.
2. das eine steht von anfang an dort
3. das zweite tauschst du bei mouseOver aus, bei mouseOut wieder das erste
4. das ganze via Javascript
5. noch fragen?

Edit: sorry, aber warum frägst du nicht nach lösungswegen sondern verlangst eine fertige lösung!!!??? sowas ist mir immer unverständlich!

 

[Durek]

lol? ich will das genau, wie beschrieben...sollte ich das so amchen, wie du sagst ist das so, wie ich es vorher hatte...ich will keinen reload haben und JS kann man sowieso deaktivieren also bitte denk auch ersma nach und gewöhn dir nen andern Ton an xD

edit: ich habe doch gesagt, wie ich es wollte und ich will nichts anderes...

 

[gruenspan]

mach es mit CSS

 

[Durek]

mach es mit CSS

sag ma wollt ihr mich verarschen? was meint ihr, warum ich das sonst ins CSS-Forum gepostet habe? Natütlich will ichs mit CSS nur wie?

__
sry mein Ton aber bin grad ein wenig gnervt

 

[da_loki]

Rollover ohne Zeitverzögerung mit Hybrid-Buttons - ZDNet Deutschland Developer ( www.zdnet.de/builder )
Bartelme Design | Smart Lists: Hover-Effekt ohne Preload
SELFHTML Forumsarchiv / 2007 / April / problem:hover effekt nicht flüssig

kurze suche bei google "hover effekt ohne laden"

 

[Durek]

danke für die Antwort ich schau es mir mal an.

kann mir einer sagen, wie ich einen Hovereffekt erzielen kann, indem ich sowas wie style="" benutze? ich übergebe ja eine Variable von PHP mit $_GET und diese müsste ich dann bei jedem .menuepunkt { } erstellen.

 

[Frank]

das geht glaube ich nicht aber es müsste so lösbar sein

<style type="text/css">
a:link {background-position:0,0;}
a:hover {background-position:100%,0;}
</style>
<a href="xxx" style="background-image:url('bla.php?var=val');">bla</a>
<a href="xxx" style="background-image:url('blo.php?var=val2');">blo/a>

 

[Durek]

Ich danke dir. Ich werde es sofort testen. Das gute hierbei ist, dass das nicht für andere Links gilt, da die ersma keinen Background ahben und so keinen azugewiesen bekommen.

EDIT:
ich habe zu meinen bisherigen CSS-Tags das dazu ergänzt:

a:link { color:#FF0000; text-decoration:none; background-position:0,0; }
a:visited { color:#FF0000; text-decoration:none; }
a:focus { color:#CC0000; text-decoration:none; }
a:hover { color:#000000; text-decoration:none; background-position: -132px,0; }
a:active { color:#000000; text-decoration:none; }

es funzt aber noch nicht mit dem Mouseover...

PS: es wurde in eine CSS-Datei egschrieben aber müsste trotzdem funzen.
Mod-Edit: Beiträge zusammengeführt, es gibt einen Edit-Button! (Alti)

 

[Frank]

falsche reihenfolge ^^

:link
:visited
:active
:hover




:focus würd ich rausschmeißen - mit der tastatur geht sowieso keiner drauf und ansonsten hast ja sowieso noch :active drin

 

[Frank]

falsche reihenfolge ^^

:link
:visited
:active
:hover




:focus würd ich rausschmeißen - mit der tastatur geht sowieso keiner drauf und ansonsten hast ja sowieso noch :active drin

Ich danke dir. Ich werde es sofort testen. Das gute hierbei ist, dass das nicht für andere Links gilt, da die ersma keinen Background ahben und so keinen azugewiesen bekommen.

Das lässt sich hier auch ganz prima durch eine klasse bewirken *^^*

 

[Durek]

Das lässt sich hier auch ganz prima durch eine klasse bewirken *^^*

theoretisch ja aber,w enn du paar Posts vorher liest, dann siehst du, dass ich das nicht will... ich sage dir danke aber leider muss ich auch sagen, dass es nicht funzt =/ keine Veränderung aber Focus hab ich entfernt.

edit: ich habe meine Lösung gefunden, die ich auch in einer Class benutzen kann auch, wenn ich das hintergrundbild mit PHP über $_GET übertrage.

.menue{
background-position: left;
}
.menue:hover{
background-position: right;
}

dies kann ich benutzen, da die angezeigte fläche genau die Hälfte der Grafik ist.