Webmaster & Internet
Jeder Mac OS X Benutzer kennt es, die schönen Eingabefelder im “Finder”, dem pendant zum Windows Explorer. Abgerundete Ecken, und sobald man eine Eingabe macht erscheint aus dem Nichts ein graues Icon mit einem Kreuz. Wenn man es drückt wird das Eingabefeld wieder geleert. Richtig praktisch!
Um das ganze auf einer Website nachzubauen ist nur HTML, CSS und ein wenig JavaScript nötig. Grundkenntnise in den verwendeten Techniken setze ich voraus. Für die jenigen, die nicht abwarten können, füge ich am Ende des Artikels den gesamten Quellcode hinzu.
1. HTML Formular erstellen
Zunächst erstellen wir unser HTML Formular mit dem Eingabefeld.
HTML-Code:
<div> <input id="inputField" class="inputField" name="search" type="text" /> <span id="inputFieldOverlay" class="inputFieldOverlay" onmouseover="onMouseOver('inputField');" onmouseout="onMouseOut('inputField');" onclick="onClick('inputField');"></span> </div>
2. Stylen per CSS
Als nächstes verändern wir das Aussehen des Eingabefeldes per CSS. Wir müssen die Rahmenfarbe ändern und dafür sorgern das die Ecken rund sind. Ausserdem setzten wir das Kreis-Icon als Hintergrundbild und positionieren beide Elemente.
Code css:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .inputField {
border: 1px solid #e2e2e2;
height: 18px;
width: 200px;
padding-left: 4px;
padding-right:20px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background-image:url('x-icon.png');
background-position: 206px;
background-repeat:no-repeat;
}
.inputFieldOverlay {
width:16px;
height:16px;
z-index:2;
position:relative;
top:4px;
left:-23px;
display:inline-block;
} |
Das meiste sollte bekannt sein. Zeile 9 sorgt dafür das das Eingabefeld runde Ecken hat. Diese Eigenschaft wurde erst im CSS 3 Standard aufgenommen, wird aber trotzdem schon von vielen Browsern unterstützt. Sollte die Eigenschaft nicht bekannt sein kann, wird auf die Eigenschaft in Zeile 7 für WebKit-Browser und Zeile 8 für Mozilla Firefox zurückgegriffen.
In Zeile 11 setzen wir das Icon als Hintergrundbild und positionieren es. Zeile 5 und 6 sorgt dafür das unsere Eingaben ins Eingabefeld nur im sichtbaren Bereich liegen und nicht das Icon überdecken.
Ab Zeile 14 beginnen wir mit dem span-Element. Dieser dient dazu den Mouse-Over festzustellen und dann das Icon zu wechseln. Wir tauschen es dann gegen ein etwas dunkleres Icon. Zeile 17 sorgt dafür das dass span-Element über dem input-Element liegt. Zeile 21 ist dafür da das dass Element auch bei leerem Inhalt angezeigt wird.
3. Steuerung durch JavaScript
Wir haben in unserem HTML Code von vorhin verschiedene Event-Handler definiert. JavaScript Funktionen die aufgerufen werden wenn ein Event ausgelöst wie Mouse-Over, Mouse-Out und das Klick-Event.
Code javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script type="text/javascript">
function onMouseOver(elementId) {
changeBackgroundImage(elementId, 'x-icon-hover.png');
}
function onMouseOut(elementId) {
changeBackgroundImage(elementId, 'x-icon.png');
}
function onClick(elementId) {
var element = document.getElementById(elementId);
element.value = '';
}
function changeBackgroundImage(elementId, newImage) {
var element = document.getElementById(elementId);
element.style.backgroundImage = 'url(' + newImage + ')';
}
</script> |
Die Funktionen onMouseOver- und onMouseOut werden jeweils bei einem Mouse-Over bzw. Mouse-Out über das span-Element aufgerufen. Sie rufen die Funktion changeBackgroundImage auf, die das Hintergrundbild des Eingabefelds ändert. Die onClick-Funktion wird bei einem Klick auf das span-Element aufgerufen und löscht den Inhalt des Eingabefelds.
Das war’s auch schon! Bei fragen dürft ich euch gerne an mich wenden! Ich werde nun den gesamten Quellcode anhängen sowie die zwei Icons die für den Mouse-Over Effekt benötigt werden.
Besucht mal meinen Blog @ websocialist.de
Quellcode:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Eingabefeld Mac OS X Style</title> <style type="text/css"> input:focus { outline:none; } .inputField { border: 1px solid #e2e2e2; height: 18px; width: 200px; padding-left: 4px; padding-right:20px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background-image:url('x-icon.png'); background-position: 206px; background-repeat:no-repeat; } .inputFieldOverlay { width:16px; height:16px; z-index:2; position:relative; top:4px; left:-23px; display:inline-block; } </style> <script type="text/javascript"> function onMouseOver(elementId) { changeBackgroundImage(elementId, 'x-icon-hover.png'); } function onMouseOut(elementId) { changeBackgroundImage(elementId, 'x-icon.png'); } function onClick(elementId) { var element = document.getElementById(elementId); element.value = ''; } function changeBackgroundImage(elementId, newImage) { var element = document.getElementById(elementId); element.style.backgroundImage = 'url(' + newImage + ')'; } </script> </head> <body> <div> <input id="inputField" name="search" type="text" /> <span id="inputFieldOverlay" onmouseover="onMouseOver('inputField');" onmouseout="onMouseOut('inputField');" onclick="onClick('inputField');"></span> </div> </body> </html>
Login
Bereiche
Kategorien
Forum - Webmaster & Internet
tutorials.de-Systemmitteilung