Créez votre site avec honolulu...
Apprendre le html
Cours de javascript
Apprendre les CSS

Habiller les zones de texte avec le DHTML  








Pour habiller vos input, utilisez les CSS ! Essayez ceci dans vos <style> :

input{
FONT-WEIGHT: bold;
BORDER-LEFT-COLOR:white;
BORDER-BOTTOM-COLOR: #009999;
COLOR: #ffffff;
BORDER-TOP-STYLE: outset;
BORDER-TOP-COLOR:white;
BORDER-RIGHT-STYLE: outset;
BORDER-LEFT-STYLE: outset;
BACKGROUND-COLOR: #009999;
BORDER-RIGHT-COLOR: #009999;
BORDER-BOTTOM-STYLE: outset;
}

Saviez-vous qu'il était possible d'obtenir avec un simple <input> les mêmes effets qu'avec un <div> ? Réponse en image ! Survolez à différents endroits la phrase qui suit pour vous en rendre compte...

Une même phrase peut en cacher bien d'autres ! et plus encore...



Le code Javascript est tout simple :

<script>
function affichez(chonum){
var textes=new Array("Ceci est possible...","...grâce à l'utilisation","des <span> ou des <div>","et d'un <input type=\"text\"> !!!")
document.formo.texture.value=textes[chonum]
}
</script>

de même que le code HTML :

<span onmouseover="affichez(0);this.style.color='red';" onmouseout="this.style.color='green'" style="color:green;">Une même phrase</span>
<span onmouseover="affichez(1);this.style.color='blue';" onmouseout="this.style.color='yellow'" style="color:yellow;"> peut en cacher</span>
<span onmouseover="affichez(2);this.style.color='white';" onmouseout="this.style.color='purple'" style="color:purple;"> bien d'autres !</span>
<span onmouseover="affichez(3);this.style.color='lime';" onmouseout="this.style.color='orange'" style="color:orange;"> et plus encore...</span>

Il n'est pas interdit d'envisager de mettre des images en background de vos input ou de vos <textarea> :



Le code de ce <textarea> pas comme les autres :

<textarea cols="20" rows="5" style="background-image:url(golf.gif)">Voici un <textarea> qui contient une image dans son background !!! Pour ce qui est de la couleur du texte vous avez bien sûr le choix...</textarea>
Pour la couleur du texte, rajoutez "color:votre_couleur"...

Rien n'empêche d'habiller aussi vos <input type="text"> :

Voici une image (qui aurait pu être un gif animé) :



La même image reproduite en toile de fond d'une zone de texte :



Le code est strictement le même que celui du textarea...