Discussion :

[cooltails83]

Bonjour à tous les jeunes et moins jeunes développeurs en herbe qui auront bien la patience de m'aider dans ma recherche sur cet effet javascript.

Comme l'indique le titre de mon post j'aimerai faire un effet JS de tel façon que, lorsque l'on survole un lien hypertexte le texte passe d'une couleur définie à une autre par une transition.

je suis arrivé a se résultat la en bidouillant des codes mootool ( j'ai oublié de préciser que je suis graphiste à la base je ne sais pas développer en JS je "chercher" en bidouillant )

http://vainceweb.free.fr/javascript/effets/index.html

Tout à l'air de fonctionner mais si l'on survol le lien et que l'on ressort rapidement la couleur au survol reste alors que j'aimerai que la transition se repasse dans le sens inverse.

Comment faire ?

[Bovino]

Dans tes déclarations, rajoute :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var morpha = new Fx.Morph('accueil').set({link:'chain'});

[cooltails83]

Merci d'avoir répondu déjà mais ça fonctionne toujours pas. J'ai pourtant mis ce que tu l'as dis de mettre mais le retour ne se fait toujours pas kan je survole très vite mon lien:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
window.addEvent('domready', function() {
	var el = $('myElement');
 
	// MooTools is able to handle effects without the use of a wrapper,
	// so you are able to do effects with just one easy line.
 
 
	var anotherEl = $('anotherElement');
 
	// Again we are able to create a morph instance
	var morpha = new Fx.Morph('accueil').set({link:'chain'});
 
	$('accueil').addEvent('mouseover', function(a) {
		a.stop();
		morpha.start({
			color: '#00c2f3'
		});
	});
 
	$('accueil').addEvent('mouseout', function(a) {
		a.stop();
		morpha.start({
			color: '#414141'
		});
	});
 
});

[Bovino]

Désolé, je connais pas spécialement mootools... effectivement, l'emplacement n'est pas forcément le bon. Essaye comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var morpha = new Fx.Morph('accueil');
 
	$('accueil').addEvent('mouseover', function(a) {
		a.stop();
		morpha.start({
			color: '#00c2f3',
			link:'chain'
		});
	});

[cooltails83]

Merci d'aider un pauvre graphiste qui comprends rien au JS

Malheureusement ça marche toujours pas j'ai beau avoir écrit ce que tu m'as dis problème reste le même si je survol rapidemment mon lien la transition se lance et reste bloquée à la couleur du survol... snif...

à moins que j'ai peut etre mal compris ce que tu m'as di de faire j'ai juste a copier ce code la ou alors il faut que je déclare quelque chose en plus pour le : link:'chain'

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
var morpha = new Fx.Morph('accueil');
 
	$('accueil').addEvent('mouseover', function(a) {
		a.stop();
		morpha.start({
			color: '#00c2f3',
			link:'chain'
		});
	});
 
	$('accueil').addEvent('mouseout', function(a) {
		a.stop();
		morpha.start({
			color: '#414141',
			link:'chain'
		});
	});
 
});

[Bovino]

Non, c'était bien ça... Autre tentative :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var morpha = new Fx.Morph('accueil',{link:'chain'});	
	$('accueil').addEvent('mouseover', function(a) {
		a.stop();
		morpha.start({
			color: '#00c2f3'
		});
	});

Je pense que ça devrait être bon

[cooltails83]

c'est carrément pas mal !!! Tu es plein de ressources dis moi ! Ouai ça à l'air de fonctionner tout du moins même kan je passe gras vite ça fini par refaire la transition dans l'autre sens...

seul petit "hic" parfois il fait deux fois la transition tien tu peux aller voir le résultat sur cette adresse.

http://vainceweb.free.fr/javascript/effets/index.html

Ah on y est presque :p ( même si on y arrive pas à fond déjà j'ai l'air moins bête de présenter ça hihi )

[Bovino]

Le link: 'chain' permet de mettre les effets dans une sorte de file d'attente. Au départ, la valeur par défaut est de ne pas lancer l'effet si le précédent n'est pas terminé. En revanche, tu peux aussi mettre à 'cancel' pour annuler l'effet précédent et lancer tout de suite le nouveau.
Quant au double effet, c'est peut-être que tu es passé près de la limite de l'élément et du coup tu as pu sortir puis rentrer, ou juste un bug du script dans des cas limites.

[cooltails83]

Super merci de m'avoir dépanné je vais pouvoir l'utiliser dans mon folio :p

Ahah j'suis content !!
Pour ceux qui passeraient sur ce post à l'avenir hésitez pas à améliorer ou à modifier et si vous avez besoin des sources demandez moi.

merci encore BOVINO