| Voir le sujet précédent :: Voir le sujet suivant |
| Auteur |
Message |
yac
Site Admin
Inscrit le: 03 Fév 2007
Messages: 105
|
 Posté le: Mar Fév 20, 2007 1:07 pm Sujet du message: [javascript] Un bouton animé |
 |
|
Dans ce cours d'instruction nous créerons une fonction très simple de Javascript que nous pouvons employer en nos pages Web toutes les fois que nous voulons animer un bouton.
La première chose que nous devons faire est de déterminer comment aborder animer notre bouton. Habituellement vous voudrez que votre bouton réagisse d'une manière quelconque à l'utilisateur (comme quand ils planent leur curseur de souris plus d'il). Vous pourriez créer un GIF animé et être faits avec lui, mais le bouton animerait continuellement (à moins que vous le placiez au juste de jeu par le passé), sans n'importe quelle interaction de l'utilisateur. Clairement n'est pas ce que nous voulons. Au lieu de cela nous armerons la puissance du Javascript.
On incorporerait habituellement un graphique à une page Web avec le HTML comme ce qui suit :
<img src="http://www.domain.com/button.jpg" />
Puisque nous voulons que le bouton change c'est aspect quand l'utilisateur plane au-dessus de lui avec leur souris, nous se servira des attributs de HTML onmouseover et onmouseout. Ceux-ci correspondent au curseur de souris se déplaçant au-dessus d'un élément (dans ce cas-ci ce sera une image référencée par une étiquette d'img) et au curseur de souris s'écartant d'un élément. Nous placerons comme valeur de ces attributs, un appel à notre fonction (que nous avons écrire encore), passant à la fonction une référence à l'étiquette d'img dont l'attribut de src nous voulons changer, aussi bien que l'endroit de la nouvelle image. Voila maintenant la fonction.
La fonction
function button_swap(button, imgsrc)
{
button.src = imgsrc;
}
Le HTML qui incorpore nos images de bouton ressemblera à ceci :
<img src="button_off.jpg" onmouseover="button_swap(this, 'button_on.jpg');" onmouseout="button_swap(this, 'button_off.jpg');" />
Noter le mot « this » dans la liste d'argument de notre fonction ? C'est simplement une référence à l'objet courant, dans ce cas-ci notre étiquette d'img. En passant à notre fonction une référence à un objet, nous pouvons lui accéder est des propriétés.
La fonction est très simple car vous pouvez voir, se composant d'un rapport simple de Javascript. Elle est simple parce que le charger qu'elle doit accomplir est simple. Chaque fois que la fonction s'appelle, c'est le premier paramètre est rempli de référence à l'étiquette d'img dont l'attribut de src nous voulons changer, avec l'endroit de l'image à permuter dehors avec l'image courante. La fonction remet à zéro l'attribut de src de l'étiquette d'img avec l'endroit d'image passé dedans comme deuxième argument.
Quand nous écrivons l'étiquette d'img, nous plaçons l'attribut de src à un graphique représentant un bouton dans un état inactif. L'attribut onmouseover emprisonne l'événement de l'utilisateur déplaçant leur souris sur le bouton, ceci incite le navigateur à exécuter le button_swap (), permutant l'image inactive de bouton à regardant actif. onmouseout assure la même chose se produit quand la souris est écartée le bouton (cependant avec un graphique actif de bouton permuté avec inactif). Maintenant, toutes les fois que quelqu'un déplace leur souris en marche et en arrêt le bouton, il semblera commuter en marche et en arrêt en conséquence, ayant pour résultat un joli effet frais.
Nous emploierons ce ci :
pour le notre nous boutonnons au loin,
et ce ci
pour le notre se boutonnent dessus.
Si vous voudriez employer nos graphiques de bouton pour l'essai
[b]Et voila tout le code:[/b]
Voici le code source pour un exemple fonctionnant que vous pouvez jouer avec. Se rappeler de placer les chemins corrects pour les images de bouton !
<!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" xml:lang="fr" lang="fr">
<head>
<script language="Javascript" type="text/javascript">
<!--
function button_swap(button, imgsrc)
{
button.src = imgsrc;
}
//-->
</script>
</head>
<body>
<p>
<img src="mtutorial_bouton_off.gif" border="0" wdith="100" height="28"
onmouseover="button_swap(this, 'mtutorial_bouton_on.gif');"
onmouseout="button_swap(this, 'mtutorial_bouton_off.gif');" />
</a>
</p>
</body>
</html>
Cliquer ici pour voir Résultat final
Si vous trouvez des difficulté, N’hésite pas a poser les questions
Bonne chonse  |
|
| Revenir en haut de page |
|
 |
al_motamarid
Nouveau membre
Inscrit le: 21 Fév 2007
Messages: 42
|
| Posté le: Sam Avr 28, 2007 3:54 pm Sujet du message: |
|
|
ouiiiiiiiiiiiiiiiiiiiiiiiiiii
trés chere yayou
merci bcp bcp pour l'efort
a la'ttend
de votre nouveu excul
merci |
|
| Revenir en haut de page |
|
|
XIII
Site Admin
Inscrit le: 15 Jan 2007
Messages: 150
|
| Posté le: Mar Mai 01, 2007 8:32 pm Sujet du message: |
|
|
| ca c est notre admin ^_^ |
|
| Revenir en haut de page |
|
|
al_motamarid
Nouveau membre
Inscrit le: 21 Fév 2007
Messages: 42
|
| Posté le: Mer Mai 02, 2007 12:52 pm Sujet du message: |
|
|
oui
ca c est sur que c est ...
..... lui
merci x3  |
|
| Revenir en haut de page |
|
|
XIII
Site Admin
Inscrit le: 15 Jan 2007
Messages: 150
|
| Posté le: Mer Mai 02, 2007 4:53 pm Sujet du message: |
|
|
la ca va fair MAL
pou la dernier foix XIII ca veu dire 13....
pour toi qui ne peu pas comprendre le longage hum je vais faire simple XIII=13
 |
|
| Revenir en haut de page |
|
|
al_motamarid
Nouveau membre
Inscrit le: 21 Fév 2007
Messages: 42
|
| Posté le: Lun Oct 29, 2007 5:28 pm Sujet du message: |
|
|
« XIII » a écrit: la ca va fair MAL
pou la dernier foix XIII ca veu dire 13....
pour toi qui ne peu pas comprendre le longage hum je vais faire simple XIII=13
ok x3
ah pardon 13
je suis desolé
 |
|
| Revenir en haut de page |
|
|
XIII
Site Admin
Inscrit le: 15 Jan 2007
Messages: 150
|
| Posté le: Lun Oct 29, 2007 7:32 pm Sujet du message: |
|
|
bill tes vraimement mal barè je vien je suis on route pour maitre ton cyber a feu et a sang WAZAAAAAAAAAAAA!! |
|
| Revenir en haut de page |
|
|
al_motamarid
Nouveau membre
Inscrit le: 21 Fév 2007
Messages: 42
|
| Posté le: Mar Oct 30, 2007 9:16 am Sujet du message: |
|
|
mais qu'est ce que j'ai fait moi ??
j'ai juste te demande de me pardoné !!   |
|
| Revenir en haut de page |
|
|
yac
Site Admin
Inscrit le: 03 Fév 2007
Messages: 105
|
| Posté le: Mar Oct 30, 2007 1:41 pm Sujet du message: |
|
|
X3 lol
ou bien X!!!  non XIII |
|
| Revenir en haut de page |
|
|
|
