 Buttons mit alternierendem Text bei MouseOver
Buttons müssen nicht langweilig sein. Sie sind nicht an die Form der üblichen Buttons gebunden, die ohnehin in den unterschiedlichen Browsern nicht gleich aussehen. Sie können einen alternativen Text vorsehen, der bei MouseOver eingeblendet wird.
|
|
Formularbuttons mit alternierendem Text
So sieht der übliche Code für einen Sendebutton aus:
<input type="submit" value=" senden ">
So sieht der übliche Code für einen Button aus:
<input type="button" value=" Klick mich ">
Sende-Button ohne alternierender Text
<input
type="submit"
name="Sendebutton"
value=" senden ">
Sende-Button mit alternierendem Text
Zusätzliche Eintragungen in rot dargestellt
<input
type="submit"
name="Sendebutton"
onmouseover="this.value=' nur einmal klicken '"
onmouseout="this.value=' senden '"
value=" senden ">
Breite bestimmen
Wenn keine Angaben für die Breite des Buttons festgelegt wurden und der Standard-Text kürzer als der MouseOver-Text ist, verbereitert sich der Button sobald der Mauszeiger über den Button bewegt wird. Wenn Sie das vermeiden möchten, können Sie die Breite mit CSS-Angaben festlegen.
Zusätzliche Eintragungen in rot dargestellt
<input
class="lang"
type="submit"
name="Sendebutton"
onmouseover="this.value=' nur einmal klicken '"
onmouseout="this.value=' senden '"
value=" senden ">
<style type="text/css">
<!--
.lang {
width:140px;
}
-->
</style>
Sende-Button alternierender Text CSS-formatiert
Der HTML-Code ist bis auf das zusätzliche Attribut 'class' mit dem üblichen Buttoncode identisch. Mit der Angabe einer CSS-Klasse verknüpfen Sie die Formatierungsanweisungen, die im Kopfbereich des Formulars für genau diese Klasse notiert wurde.
1 Beispiel CSS-formatiert
Zusätzliche Eintragungen für die CSS-Klasse
<input
type="submit"
class="sende01"
name="Sendebutton"
onmouseover="this.value=' nur einmal klicken '"
onmouseout="this.value=' senden '"
value=" senden ">
Der CSS-Code im Head-Bereich für diesen Button:
<style type="text/css">
<!--
.sende01 {
cursor: pointer;
font:11px Arial,Helvetica,sans-serif;
color:#000000;
border: 1px solid #EED5FF;
background-color: #FFF0FF;
width:120px;
}
-->
</style>
2 Beispiel CSS-formatiert
Beachten Sie den Unterschied zum Beispiel oben, wenn Sie die Angaben für den Rand weglassen. In den meisten Browsern wird der übliche 3D-Effekt sichtbar während die Buttonfarbe den CSS-Angaben der Hintergrundfarbe entspricht!
<input class="sende02" type="Submit" value=" senden ">
<style type="text/css">
<!--
.sende02 {
cursor: pointer;
font:11px Arial,Helvetica,sans-serif;
color:#000000;
background-color: #FFF0FF;
width:120px;
}
-->
</style>
 Buttons formatieren mit CSS 02
Grafik als Formular-Button
| 
Home • Formulare • CSS • Button alternierender Text