Ein Hovereffekt oder Rollovereffekt bei Formularbuttons

[Thomas G.]

Hallo zusammen,

ich suche nach einer Lösung für einen Hovereffekt bei ganz normalen Formularbuttons. Ist dies technisch überhaupt möglich? Wenn ja wie muss ich dies machen? Danke im voraus.

CU Thomas

[Stefan Einspender]

Hallo Thomas,

ich suche nach einer Lösung für einen Hovereffekt bei ganz normalen Formularbuttons.

was spricht gegen die Verwendung der Pseudoklasse :hover? Wird ver-
mutlich nicht von allen Browsern unterstützt, ist aber die technisch
einwandfreie Lösung. Mit DHTML ist sicher auch was machbar, halte ich
aber für stark übertrieben. Da sollte es einfacher und praktikabler
sein, die Standardbuttons durch Grafiken zu ersetzen und die dann zu
verändern.

Viele Grüße,
Stefan

[Kai Lahmann]

hi

was spricht gegen die Verwendung der Pseudoklasse :hover? Wird ver-
mutlich nicht von allen Browsern unterstützt, ist aber die technisch
einwandfreie Lösung.

hmpf.. da war einer schneller...
Gerade getestet: in Mozilla funktioniert es schonmal (von dem berühmten Text-Problem abgesehen)

gruss Kai

[Thomas G.]

Hallo Thomas,

Hallo Stefan

ich suche nach einer Lösung für einen Hovereffekt bei ganz normalen Formularbuttons.

was spricht gegen die Verwendung der Pseudoklasse :hover? Wird ver-
mutlich nicht von allen Browsern unterstützt, ist aber die technisch
einwandfreie Lösung. Mit DHTML ist sicher auch was machbar, halte ich
aber für stark übertrieben. Da sollte es einfacher und praktikabler
sein, die Standardbuttons durch Grafiken zu ersetzen und die dann zu
verändern.

Mein Tag sieht jetzt so aus:

<form>
  <div style="width: 338; height: 29" >
 <input type="button" name="Test" value="Daten" onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
        </button>
  </div>

Leider funktioniert das mit dem Hover nicht mehr. Verstehe ich nicht :-(

Viele Grüße,
Stefan

CU Thomas

[Thomas Meinike]

Hallo,

ich suche nach einer Lösung für einen Hovereffekt bei ganz normalen Formularbuttons. Ist dies technisch überhaupt möglich? Wenn ja wie muss ich dies machen?

Entweder mit den bereits genannten input:hover-Technik oder mittels JS.

<input type="button" style="color: #FFF; background-color: #F00" value="Buttontext" onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}">

Bei mehrfacher Anwendung waere eine Funktion sinnvoll.

MfG, Thomas

[Thomas G.]

Hallo,

Hallo

ich suche nach einer Lösung für einen Hovereffekt bei ganz normalen Formularbuttons. Ist dies technisch überhaupt möglich? Wenn ja wie muss ich dies machen?

Entweder mit den bereits genannten input:hover-Technik oder mittels JS.

Danke für die schnelle Antwort. Leider habe ich ein kleines Problem dies bei mir einzubauen. Hier mein Tag:

<form>
  <div style="width: 338; height: 29" >
 <button STYLE="align: left; width: 280; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
           Antrag DV-Zugriffsberechtigung</button>
  </div>
</form>

Habe davor ein ASP Script laufen um neue *.doc Dateien aus der *.dot Datei zu öffen. Bei mir kommt immer ein Scriptfehler wenn ich das ausprobiere. Muss nur mit IE klappen. Danke

<input type="button" style="color: #FFF; background-color: #F00" value="Buttontext" onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}">

Bei mehrfacher Anwendung waere eine Funktion sinnvoll.

MfG, Thomas

[Kai Lahmann]

hi

<form>
  <div style="width: 338; height: 29" >
<button STYLE="align: left; width: 280; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
           Antrag DV-Zugriffsberechtigung</button>
  </div>
</form>

also die onmouseover="" und co am <button>

Muss nur mit IE klappen. Danke

sowas überlesen wir hier idr. (zumal es hier schwerer wäre zu verhindern, dass es in anderen modernen Browsern geht)

gruss Kai

[Thomas G.]

hi

Hallo

<form>
  <div style="width: 338; height: 29" >
<button STYLE="align: left; width: 280; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
           Antrag DV-Zugriffsberechtigung</button>
  </div>
</form>

also die onmouseover="" und co am <button>

Habe es so am <button> dran:

<form>
  <div style="width: 338; height: 29" >
 <button onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}" STYLE="align: left; width: 280; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
           Antrag DV-Zugriffsberechtigung</button>
  </div>
</form>

Ist aber irgendwie falsch :-(

Muss nur mit IE klappen. Danke

sowas überlesen wir hier idr. (zumal es hier schwerer wäre zu verhindern, dass es in anderen modernen Browsern geht)

Wird bei uns als Standard eingesetzt.

gruss Kai

CU Thomas

[Kai Lahmann]

Habe es so am <button> dran:

<form>
  <div style="width: 338; height: 29" >
<button onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}" STYLE="align: left; width: 280; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
           Antrag DV-Zugriffsberechtigung</button>
  </div>
</form>

Ist aber irgendwie falsch :-(

Seh ich auch so:
-> ";" am Ende der Anweisung
-> das if(this.style) kann weg, es gibt keinen Browser, der hier onmouseover="" auswertet, das aber nicht kennt.

gruss Kai

[Thomas G.]

Habe es so am <button> dran:

<form>
  <div style="width: 338; height: 29" >
<button onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}" STYLE="align: left; width: 280; color: #FF0000; background: #FFFFFF;border=0" type="button" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
           Antrag DV-Zugriffsberechtigung</button>
  </div>
</form>

Ist aber irgendwie falsch :-(

Seh ich auch so:
-> ";" am Ende der Anweisung
-> das if(this.style) kann weg, es gibt keinen Browser, der hier onmouseover="" auswertet, das aber nicht kennt.

Das ";" zu löschen bringt bei mir nichts :-( Habe es jetzt so:

<div style="width: 338; height: 29" >
 <input type="button" name="Test" value="Daten" onmouseover="{this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="{this.style.color='#FFF';this.style.backgroundColor='#F00'}" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">
          <p>
        </button>

Oder welches ";" meinst du? Habe schon versucht einfach den Tag zu nehmen:

<input type="button" style="color: #FFF; background-color: #F00" value="Lach mich aus" onmouseover="if(this.style){this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="if(this.style){this.style.color='#FFF';this.style.backgroundColor='#F00'}">

und einfach mein "onClick" hinzugefügt. Meckert aber :-(

gruss Kai

CU Thomas

[Kai Lahmann]

hi

Oder welches ";" meinst du? Habe schon versucht einfach den Tag zu nehmen:

<input type="button" style="color: #FFF; background-color: #F00" value="Lach mich aus" onmouseover="this.style.color='#FF0';this.style.backgroundColor='#00C';" onmouseout="this.style.color='#FFF';this.style.backgroundColor='#F00';">

so.
gruss Kai

[Thomas G.]

hi

Hallo Kai gehe wohl schon auf die Nerven aber sobald ich nen Link über den Knopf öffen will funktioniert es nicht mehr:

Hier mein Tag:

<input type="button" name="Test" value="Daten" onmouseover="{this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="{this.style.color='#FFF';this.style.backgroundColor='#F00'}" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">

Habe doch nur onClick eingefügt. Wie soll ich denn sonst vorgehen?

Oder welches ";" meinst du? Habe schon versucht einfach den Tag zu nehmen:

<input type="button" style="color: #FFF; background-color: #F00" value="Lach mich aus" onmouseover="this.style.color='#FF0';this.style.backgroundColor='#00C';" onmouseout="this.style.color='#FFF';this.style.backgroundColor='#F00';">

so.
gruss Kai

Danke.

CU Thomas

[Kai Lahmann]

hi

<input type="button" name="Test" value="Daten" onmouseover="{this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="{this.style.color='#FFF';this.style.backgroundColor='#F00'}" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">

Habe doch nur onClick eingefügt. Wie soll ich denn sonst vorgehen?

-> nimm die {} weg
-> setz ein ; am Ende der 2ten Angabe.

gruss Kai

[Thomas G.]

hi

Morgen Kai

<input type="button" name="Test" value="Daten" onmouseover="{this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="{this.style.color='#FFF';this.style.backgroundColor='#F00'}" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">

Habe doch nur onClick eingefügt. Wie soll ich denn sonst vorgehen?

-> nimm die {} weg
-> setz ein ; am Ende der 2ten Angabe.

Ich glaube ich bin zu blöd dafür :-( Sieht jetzt so aus:

<input type="button" value="Berechtigung" style="color: #FFF; background-color: #F00" onmouseover="this.style.color='#FF0';this.style.backgroundColor='#00C'" onmouseout="this.style.color='#FFF';this.style.backgroundColor='#F00'"; onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">

und geht leider immer noch nicht. Was meinst du mit 2. Angabe?

gruss Kai

CU Thomas

[Thomas G.]

Hallo zusammen,

ich suche nach einer Lösung für einen Hovereffekt bei ganz normalen Formularbuttons. Ist dies technisch überhaupt möglich? Wenn ja wie muss ich dies machen? Danke im voraus.

CU Thomas

Habe jetzt den HTML Code geändert:

<input type="button" value="Berechtigung" style="color: #FFF; background-color: #F00" onmouseover="{this.style.color='#FF0';this.style.backgroundColor='#00C'}" onmouseout="{this.style.color='#FFF';this.style.backgroundColor='#F00'}" onClick="load_word '1','R:\OFFICE\VORLAGEN\RT_Zugriff.dot'">

Einfach angepasst wie im Beispiel aus dem Posting. Bekomme eine Fehlermeldung. Muss doch machbar sein, dass ich per OnClick ein *.dot öffnen kann.

Bitte helfen. Danke :-)

CU Thomas