bild faden

[hannes-n]

ich hab jetzt 1 std 30 min gegoogelt und keine lösung gefunden.

ich möchte gern bei einem menü, statt eines abgehackten :hover effekts, ein faden bentzen. ich möchte nicht den text faden lassen, sondern den hitergrund von einer zu einer anderen farbe (zb hellgrün -> dunkelgrün).

wenn es diese frage schon gab, mir sagen und url geben, anschließend thread löschen ..

wenn nicht: HIIIIIIIIIIILFE!

[derHund]

hmm,

das ist mit javascript recht leicht machbar, mit css-only könntest du ein gif benutzen .. naja

mit js: onmouseover startet nen interval, was alle 100ms die bg-farbe ändert. onmouseout macht dann das gegenteil.

am besten speicherst du den status/die stufe verschiedener elemente in einem array, veränderst per interval nur den level +/-1 ...

ja, das wars schon.

achso:

Colors = new Array();
Colors[0] = '#FFFFFF';
Colors[1] = '#FDF9F1';
Colors[2] = '#FBF4E4';
Colors[3] = '#F9EFD7';
Colors[4] = '#F7EAC9';
Colors[5] = '#F5E5BC';
Colors[6] = '#F3E0AF';
Colors[7] = '#F1DBA1';
Colors[8] = '#EFD694';
Colors[9] = '#EDD187';
Colors[10] = '#EBCC79';
Colors[11] = '#E9C76C';
Colors[12] = '#E7C25F';
Colors[13] = '#E5BD51';
Colors[14] = '#E3B844';
Colors[15] = '#E1B337';

Fields = new Array();
Fields['interval'] = new Array();
Fields['stages']   = new Array();

function fade(nr, direct) {
  if (isNaN(Fields['stages'][nr]))
    Fields['stages'][nr] = 0;
  if (Fields['stages'][nr] < 0) {
    Fields['stages'][nr] = 0;
    window.clearInterval(Fields['interval'][nr]);
  }
  else {
    if (Fields['stages'][nr] > 15) {
      Fields['stages'][nr] = 15;
      window.clearInterval(Fields['interval'][nr]);
    }
    else {
      Fields['stages'][nr] += direct;
      document.getElementById("menuitem" + nr).style.backgroundColor = Colors[Fields['stages'][nr]];
    }
  }
}

function fadein(nr) {
  window.clearInterval (Fields['interval'][nr]);
  Fields['interval'][nr] = window.setInterval("fade(" + nr + ", 1);", 25);
}

function fadeout(nr) {
  window.clearInterval (Fields['interval'][nr]);
  Fields['interval'][nr] = window.setInterval("fade(" + nr + ", -1);", 200);
}

probier mal den code, er hat mal funktioniert, denke ich mußt halt an deine verhältnisse anpassen ...

wenn du die farbverläufe nicht selbst berechnen willst, findest du in den codeschnipseln von mir einen, der das macht ... zwar in php, aber es reicht ja, einmal zu berechnen ...

[hannes-n]

danke! werds gleich ausprobieren ..

Original geschrieben von derHund
hmm,

das ist mit javascript recht leicht machbar, mit css-only könntest du ein gif benutzen .. naja

wie das? mit animiertem gif? weil css zickt doch dann wieder im ie rum, oder in firefox .. und wenn ja, gibts da ein kleines nettes tool, mit dem man animierte gif's erstellen kann?

danke.

[hannes-n]

könnte mir evtl jemand kurz einen ansatz für das obige script geben, raff noch nicht so ganz wie es läuft.

danke