Une animation sur bouton sur webgraf.com

Une animation avec plusieurs lien sur un bouton

DEMONSTRATION

Nombre de message illimité. Vitesse, pause, lien et destination paramétrable pour chaque message. Couleur paramétrable pour internet explorer.

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

Code source entre <BODY> et </BODY>

Entre <HEAD> et <HEAD>

top


<style type="text/css">
.param {font-family: arial;
        font-weight: bold;
        font-style: italic;
        color: #FF7E15;      
        border-color: #FF7E15;
        background: #000000;}
</style>

Entre <BODY> et <BODY>

top



<FORM name="frm">
<!--Uniquement sur netscape : la taille du bouton correpondont à la taille du contenu de value="----"  -->
<input class="param" type = "button" name="champ1" onClick="url()" value="-------------------">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
//Merci de ne pas effacer ces lignes
//D'autres script,applet,images sur webgraf.Com 
//Mathieu Gros, webmaster@webgraf.Com
message=new Array();speed1=new Array();
speed2=new Array();pause1=new Array();
pause2=new Array();URL=new Array();
trgt=new Array();a=0;z=0;e=0;i=1;
function ajouter(msg,url,trg,spd1,spd2,pse1,pse2){
e++;a++;message[e]=msg;speed1[e]=spd1;
speed2[e]=spd2;pause1[e]=pse1;pause2[e]=pse2;
URL[e]=url;trgt[e]=trg;
deb=message[i].length;taille=deb;}
function avant(){
document.frm.champ1.value=message[i].substring(deb,taille);
if (deb>0) setTimeout ("avant()",speed1[i]);
if (deb<=0) setTimeout ("arriere()",pause1[i]);deb--;}
function arriere(){
document.frm.champ1.value=message[i].substring(deb,taille);
if (deb<taille) setTimeout ("arriere()",speed2[i]);
else {i++;if (i>a) i=1;deb=message[i].length;
taille=deb;setTimeout ("avant()",pause2[i]);};deb++;};
function url(){if (URL[i]!="no"){
if (trgt[i]=="blank") mywindow=window.open(''+URL[i]+'');
else if (trgt[i]=="self") document.location=URL[i];
else parent.frames[trgt[i]].location=URL[i];};}

/**************************************************************
Tout les paramètres sont situé ci-dessous,
toute nouvelle ligne doit être de la forme:
ajouter("Message"," URL","target", speed1,speed2,pause1,pause2)   */  

ajouter("Yahoo.fr","http://www.yahoo.fr","blank",80,20,500,100)
ajouter("Altalavista","http://www.Altalavista.com","blank",80,20,500,100)
ajouter("Ecrivez moi !!","mailto:webmaster@webgraf.com","self",80,20,500,100)
ajouter("LeGratuit.com","http://www.LeGratuit.com","blank",80,20,500,100)
ajouter("===WEBGRAF.COM===","http://www.LeGratuit.com","blank",80,20,500,100)

avant()
//-->
</SCRIPT>

INFORMATIONS COMPLEMENTAIRES

top

Les différences entre Netscape et Internet explorer

Netscape affiche toujours un bouton gris avec des caractères noirs, de plus le bouton est toujours fixe.
Internet explorer prend en compte les paramètres de couleur du fond, de bordure et de caractère du bouton, de plus la taille du bouton s'adapte en temp réel aux messages.
Dans tous les cas, l'animation et les liens fonctionnent sauf ces quelques différences.

Chaque message est paramétré grace à une ligne du type
ajouter("Message"," URL ","target", speed1,speed2,pause1,pause2)
Le premier message à apparaitre est la premiere ligne et le dernier, la dernière ligne.

Détail des paramètres :

Message est le texte qui apparait sur le bouton
URL est l'adresse internet ou votre e-mail au format mailto:nom@domaine.com : Pour un mail, mettre "self" dans le "target" et pour ne pas faire de lien mettre "no" dans l'"URL"
target est la destination de votre lien. Soit "self", "top", "blank" ou "nom du cadre".
speed1 est la vitesse d'apparition du message (en ms par caractère)
speed2 est la vitesse de disparition du message (en ms par caractère)
pause1 est le temp de pause lors de l'affichage complet du message (en ms)
pause2 est le temp de pause lorsque le message n'est plus affiché (en ms)

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)
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 bouton 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 .
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