✔ Hover Effekt für Form Tag ?

[son gohan]

Hallo,

ich habe bei einem Form Tag für den submit Button eine Grafik eingesetzt.

<form name="antwort" action="ll.php" method="get">
<input type="hidden" name="antwort" value="Hier kommt der Text hin">beschreibung<br>
<input style="width:40px;background-image: url(gif/n.gif);border:0px;height:16px;" type="submit" name="senden" value="&nbsp;">
</form>

Mein n.gif ist ein Text, davon habe ich zwei erstellt einmal mit und einmal ohne Unterstrich, ich will das sich das zweite n.gif zeigt wenn man mit der Maus über den submit Button fährt. Wenn man jetzt mit der Maus darüber fährt passiert aber nichts und das sieht nicht gut aus so.

gruß
feh

 

[redlama]

Du hattest doch schon mal wegen Hover für Bilder gefragt, ...
mit hover Bilder wechseln, aber nicht einfach hintergrundbild?
Das kannst Du doch dafür genauso anwenden oder wo ist da das Problem?

redlama

 

[son gohan]

Hi,

der Unterschied liegt doch hier klar auf der Hand, lieber redlama? Hier habe ich ein input Tag und kein a Tag?

Ansonsten hätte ich das mit CSS fü ein normales a Tag schon hinbekommen.

Aber du bist der Fachmann für Formulare habe ich den Eindruck, was meinst du geht das hier?

gruß
feh

 

[redlama]

Hab's gerade noch mal probiert, geht leider nicht, ...
Aber ich hätte schwören können, dass ich das schon mal irgendwo gesehen habe, ...
Wenn mir was einfällt, melde ich mich wieder, ...

redlama

 

[son gohan]

Hallo,

ok, dank dir. Ich hab doch geahnt das es nicht so einfach wenn überhaupt möglich ist.

gruß
feh

 

[Quaese]

Hi,

mit JavaScript wäre ein Bildwechsel möglich. Hat allerdings den Nachteil, dass diesen Effekt
nicht alle sehen können.

<input onmouseout="this.style.backgroundImage='url(gif/n.gif)';" onmouseover="this.style.backgroundImage='url(gif/n2.gif)';" style="width:40px;background-image: url(gif/n.gif);border:0px;height:16px;" type="submit" name="senden" value="&nbsp;" />

Vielleicht hilft es dir ja weiter.

Ciao
Quaese

 

[son gohan]

Hallo Quase,

ich denke das ist echt eine gute Lösung, trozt der Tatsache das vielleicht viele Leute kein Javascript eingeschaltet haben.

Vielen Dank.

gruß
feh

 

[Maik]

Alternativ zu Quaese's Lösung funktioniert auch diese Technik:

CSS-Code:

input.normal
{
width: 40px;
height: 16px;
background-image: url(gif/n.gif);
border: 0px;
}

input.hover
{
width: 40px;
height: 16px;
background-image: url(gif/n2.gif);
border: 0px;
}

HTML-Code:

<input class="normal" onmouseover="this.className='hover'" onmouseout="this.className='normal'" type="submit" name="senden" value="&nbsp;">

greez, maik.l

 

[son gohan]

Hallo maik,

ist bei deiner Lösung nicht auch Javascipt dabei? Wenn ja, dann ist es zwar nicht ein großer Unterschied, aber vielleicht kann man damit besser gestalten.

gruß
feh

 

[Maik]

Hallo feh,

die von mir vorgestellte Technik ist die gleiche: JavaScript + CSS.

Der Unterschied liegt im CSS-Handling für mehrere Projektseiten, die so einen 'dynamischen' Formular-Button enthalten werden.

Mit Hilfe der beiden zentralen CSS-Klassen .normal und .hover und dem Script-gesteuerten Tauschen der Klassen-Namen, muss bei zukünftigen Änderungen am Seitenlayout nicht in jeder einzelnen Projektseite die Grafik-Referenz für die beiden Event-Handlers onmouseover und onmouseout überarbeitet / korrigiert werden. ;-]

greez, maik.l