Texte interactif sur Webgraf.com

Du texte interactif dans un champ de texte

DEMONSTRATION

Telecharger cette page
Code source en 2 parties :
- Entre <HEAD> et </HEAD>
- Entre <BODY> et </BODY>
Informations

Code source en 2 parties

Entre <HEAD> et <HEAD>


<!--Détails des paramètres : voir "informations"-->
<style type="text/css">
.mgros {font-family: arial;  
        font-weight: bold;
        font-style: italic;
		text-align: center;
		color: #FF7E15;      
        border-color: #FF7E15;
        background: #000000;}
</style>

Entre <BODY> et <BODY>

top


<SCRIPT LANGUAGE="JavaScript">
<!--
//Merci de ne pas effacer ces lignes
//D'autres script,applet,images sur webgraf.Com 
//Mathieu Gros, webmaster@webgraf.Com

var defaut="Passez votre souris au-dessus des liens ci-dessous"  //Texte par défaut
var Tnetscape=35 //Longueur du champ avec NETSCAPE
var Texplorer=60 //Longueur du champ avec INTERNET EXPLORER

function i(){};if (navigator.appName == "Netscape")size=Tnetscape;else size=Texplorer;
document.write("<FORM NAME=\"wbgrf\"><INPUT class='mgros' TYPE='text' NAME='Texte' SIZE="+size+" value='"+defaut+"'</FORM>")
//-->
</script>

<!--Mettez autant de liens que vous voulez et où vous voulez dans votre document--> 
<A HREF="http://www.webgraf.com" target="blank" onMouseOver="document.wbgrf.Texte.value ='si vous cliquez vous irez sur la 1er page de Webgraf.com'">Webgraf.com</A>
<A HREF="mailto:webmaster@webgraf.com" onMouseOver="document.wbgrf.Texte.value='écrivez moi un petit mot..'">e-mail</A>
<A HREF="javascript: i()" onMouseOver="document.wbgrf.Texte.value='Ce lien est désactivé'">Inactif</A>

INFORMATIONS COMPLEMENTAIRES

top

Divers

Si vous ne voulez pas faire de lien , mettez javascript: i() à la place de l'URL pour le désactiver.
Vous pouvez mettre des images pour faire le lien. (Pourquoi ne pas faire un explicatif de chaque option d'un menu, chaque option étant une image ou du texte?)
N'oubliez pas que vous pouvez indiquer une destination pour chaque lien grace à Target="destinations" (destinations= self,top,blank ou nom du cadre)

Les différences entre Netscape et Internet explorer

Netscape affiche toujours un champ de texte à fond blanc avec les caractères noirs positionnés à gauche.
Internet explorer prend en compte les paramètres de couleur du fond , positionnement et de bordure du bouton.
IMPORTANT : la taille des boites de messages ne sont pas les mêmes entre Netscape et Internet explorer pour la même valeur. Voilà pourquoi vous devez indiquer deux valeurs différentes. Vérifier avec les deux navigateurs.

Détail des paramètres entre <HEAD> et <HEAD>

font-family: arial; Police de caractères (arial, courrier, normal etc...)
font-weight: bold; Style de caractères (bold, italic, normal)
font-style: italic; Style de caractères (bold, italic, normal)
text-align: center; Positionnement du texte (left,right,center) (Uniquement pour internet explorer !)
color: #FF7E15; Couleur des caractères (RGB en héxa) (Uniquement pour internet explorer !)
border-color: #FF7E15; Couleur du bord du bouton (Uniquement pour internet explorer !)
background: #000000; Couleur de fond du bouton (Uniquement pour internet explorer !)
Si vous rajoutez border-style: none;, le champ disparaitra (Uniquement pour internet explorer !)

Comment intégrer ce script dans votre page:

Faites un copier/coller du code source ci-dessus dans votre document HTML en respectant l'emplacement de chaque partie du script .
Modifiez les différentes variables de ce script à votre gré.

Vous pouvez télécharger cette page au format zip :télécharger.

Un problème ou une critique : e-mail
Des ressources utiles et gratuites pour vos pages Web :
webgraf.com