[Clarén]

Hej,
Jag har råkat på ett mysko problem.

Jag ville ha menyknappar som tänds och släcks med en animerad effekt när musen förs över dem. Jag gjorde det i CSS med "background-image:url(_sajtgrafik/menyknapp.gif);" respektive "background-image:url(_sajtgrafik/menyknapp2.gif);" för hover.

Så länge jag bara har EN knapp på menyn så funkar det. Animeringen som lyser upp knappen när pekaren kommer över knappen körs och animeringen som släcker knappen igen när pekaren försvinner körs också. Snyggt och prydligt.

Men, när jag lägger in fler knappar så funkar inte animeringen för släckning, knappen blir bara svart, helt tvärt. Men animerad tändning funkar fortfarande på alla knappar.

OK, tänkte jag, då går det väl inte med CSS, så då skrev jag funktionen i javascript med "setAttribute("src","/_sajtgrafik/menyknapp.gif");" respektive "setAttribute("src","/_sajtgrafik/menyknapp2.gif");"

Då får jag EXAKT samma betende. En knapp funkar men med två eller fler fungerar inte onmousout funktionen. Eller rättare sagt det gör den, för knappen blir ju svart igen, men animeringen körs inte.

Någon som vet vad detta fenomen beror på???

Sidan finns här om någon vill titta
http://sjobosoriginal.se (CSS varianten)
http://sjobosoriginal.se/test.html (JS varianten)

[rhdf]

på http://sjobosoriginal.se/test2.html så får jag istället fenomenet att BÅDA knapparna kör "släcknings animeringen (i firefox)

[Clarén]

Jaha, jo jag ser det nu. I firefox fungerar javascriptet som tänkt när man växlar mellan knapparna. Men tar man bort pekaren helt från knapparna så aktivers släckning på båda.
Men CSS varianten beter sig likadant som i IE.

Jag blir bara mer och mer förvirrad :-)

[rhdf]

just fenomenet att BÅDA knapparna triggas på onmouseout gav mig rätt många extra gråa hår när jag försökte hitta en vettig lösning på problemet.. så jag gav upp.

jag skulle ta den enkla vägen och designa om det hela eftersom nuvarande lösning uppenbart inte fungerar (ja den KAN funka om man väljer att blanda in en hel massa rader extra javascriptkod eller kanske t.o.m flash)

när jar snurrade runt ocg försökte hitta en lösning så hamnade jag här http://api.jquery.com/hover/ notera effekten på demon där. ungefär samma sak, 2 element triggar på det ena elementets "action"

jag skulle gå på en re-design som går ut på att skippa animeringen på bakgrunden.
Gör 2 bilder en svart och en "gul" och sätt dessa via css (av erfarenhet funkar det, vill du optimera httprequest så kör du EN bild*)

*optimering
[svart yta] (22px hög)
[gul yta] (22px hög)
dvs i samma bild, och sen bara ändra background-position till -22 vid hover