1. Accueil
  2. Forum Codes-Sources
  3. Javascript / DHTML

[java] affichage d'un texte progressivement au passage de la souris

Signaler
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
 -
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
 -
Salut tout le monde !

J'ai un gros problème je n'arrive pas a afficher PROGRESSIVEMENT un texte au passage de la souris sur une photo.

je n'est aucun problème pour le faire afficher d'un seul coup, mais progressivement de la droite vers la gauche je n'y arrive pas.

Si vous pouvez me donner un petit coup de main , je vous en serait reconaissant.

Merci d'avance de vos réponse !

Thibault.
Afficher la suite

15 réponses

Réponse 1 / 15
Messages postés
6414
Date d'inscription
mardi 8 mars 2005
Statut
Modérateur
Dernière intervention
29 juillet 2020
 327
Bonjour,

Tu programmes en java ou en javascript ?

Qu'est ce que tu entends par progressivement ? Lettre par lettre ?

Peux tu nous donner ton code ?

Si tu utilises Java, quelle sorte d'interface graphique utilises tu (Swing, JEE,..) ?
Réponse 2 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
En faite je ne connais rien du tout au java, mais alors rien du tout,je connais uniquement le html/css et le php/mysql.

je vous ait fait une petite vidéo de ce que je veux :http://www.youtube.com/watch?v=DYbBFws4ghA

sa serait pour un site web bien sûr.
Réponse 3 / 15
Messages postés
6414
Date d'inscription
mardi 8 mars 2005
Statut
Modérateur
Dernière intervention
29 juillet 2020
 327
Alors, si je comprends bien, tu souhaiterais qu'on te donne le code qui te permet de faire ce qui est filmé sur cette vidéo.

Tu n'as pas de code à nous montrer ? As tu essayé ou pas du tout ?
Réponse 4 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
Exactement !

Voici le code de mon mini menu (ce qui est en rouge est l'image où je veux le faire ).



[index.html ]







[index.html ]







[index.html ]







[index.html ]











j'ai déjâ essayer sa :

je met ce qui suit entre <head> et </head>

<SCRIPT LANGUAGE="JavaScript">

function ChangeMessage(message,champ)
{
if(document.getElementById)
document.getElementById(champ).innerHTML = message;
}
</SCRIPT>

et sa entre les balises body

[newsletter.php newsletter]
Réponse 5 / 15
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011
Voilà un script gratuit qui est vraiment très bien fait et très complet:
http://jstween.blogspot.com/

et voici un exemple pour le texte:
http://jstween.sourceforge.net/TextTween_.html

Et il reste finalement assez simple à intégrer pour autant que tu connaisse un peu JS. Mais si tu ne connais vraiment RIEN à javascript, je vois comment t'aider simplement.

a++
Réponse 6 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
Merci de vos réponses !

mikeyjoy SUPER tes lien, j'y connais rien en javascript mais je vais surrement y arriver avec sa !

Si je réussi je posterais mon code.
Réponse 7 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
Ok j'approche du but ! j'ai encore 3 questions :

comment le faire partir de droite et le faire aller à gauche.
comment remplacer le cube par un texte.
comment faire pour que cela ce délcenche en passant la souris sur mon image.

voila le script que je met entre mes balises body





et voici le fichier tween : http://jstween.sourceforge.net/Tween.js
Réponse 8 / 15
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011
comment le faire partir de droite et le faire aller à gauche.
Essaye de mettre une valeur négative (-20 par exemple)

comment remplacer le cube par un texte.
Pour faire au plus simple: (voir code en bleu)

comment faire pour que cela ce délcenche en passant la souris sur mon image.
remplace le onclick par onmouseover


TexteTexteTexteTexteTexte
Réponse 9 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
super sa marche nikel sauf que il ya le bouton start que je veux remplacer pas mon icone
Réponse 10 / 15
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011
désolé, mal lu

Alors, remplace ton bouton par ton image et le mouseover:



+
Réponse 11 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
Merci de vos réponse j'ai réussi !!
Maintenant pour chipoter un peu je voudrais que mon texte soit de opacité 0 au début et de 100 a la fin.

Oui ce sera tout.

Grand merci a toutes vos réponses.
Réponse 12 / 15
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011
Ca je n'ai pas encore essayé. A voir donc directement sur le site "Tween".


Bah si j'ai pu te rendre service .
Bon Js ^^
Réponse 13 / 15
Messages postés
28
Date d'inscription
dimanche 3 avril 2011
Statut
Membre
Dernière intervention
8 août 2011
Voilà le code qui pourra t'aider. Exemple: 
<html>
<head>
<meta http-equiv=  "Content-Type" content="text/html; charset=UTF-8">
<title>Document sans nom</title>
<script type="text/javascript" language="javascript" src="Tween.js"></script>
<script type="text/javascript" language="javascript" src= "OpacityTween.js"></script>
</head>




MonTexteMontexte




</html>


Il faut que tu télécharge le script OpacityTween.js et que tu le place après le script Tween.js (car c'est une sous-classe de Tween).
Rajoute ensuite à la suite du onmouseover les fonctions comme dans mon exemple. Il faudra que tu change peut-être les réglages, notamment les chiffres à la fin (0,100,4) = (OpacitéDeDébut, OpacitéDeFin, DuréeDeL'Animation).
Dernière chose il faut que tu ajoute dans le un "onLoad" (voir exemple) pour rendre le texte invisible au chargement de la page.

Voilà.
Réponse 14 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
Merci à tous !

Comme promis je met mon code (avant téléchargez Tween.js et OpacityTween.js).

entre les balises head :

<script type="text/javascript" src="Tween.js"></script>
<script type="text/javascript" language="javascript" src="OpacityTween.js"></script>

à la place de la balise body :



et voici le code a placer entre les balises boyd :


salut tout le monde




Encore merci .
Réponse 15 / 15
Messages postés
10
Date d'inscription
samedi 14 mai 2011
Statut
Membre
Dernière intervention
13 juillet 2011
Et oui j'ai encore un problème !!

Cette fois si quand je passe la souris sur mon icone le texte passe bien de l'opacité 0 a 100 et va bien vers la gauche mais il clignote !!!

regarder par vous même (c'est l'icone rss en haut a droite) :

http://trashweb.olympe-network.com/


En passant si vous avez des idées pour mon site hésiter pas !
Répondre Posez votre question