Sujet Précédent Sujet Suivant

Débutant JS: aide pour algorithme

Fermé
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 - Modifié par abcdu44 le 22/03/2011 à 20:40
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 - 23 mars 2011 à 16:10
Bonjour,

Me revoila de nouveau pour une ultime question :-)
toujours concernant mon histoire d'animation de menu (topic n°1, topice n°2), j'ai créé un petit code en javascript (je débute, je précise!) un peu comme je pensais que ca pourrait marcher.

évidemment, si je viens ici, c'est que ca ne marche pas...

en fait, l'animation est un fondu d'images que je trouvais sympa a réaliser, qui se joue donc sur le menu, dont voici la source html: 

<div class="box">   
  <ul>   
    <li>   
      <a href="index.html">   
      <img src="Index.html_fichiers/img/acceuil.png" border="0" width="190" height="20" id="img1">   
      <img src="Index.html_fichiers/img/acceuil_h.png" border="0" width="190" height="20" id="img1_1">   
      </a>   
    </li>   
    <li>   
      <a href="prestations.html">   
      <img src="Index.html_fichiers/img/prestations.png" border="0" width="190" height="20" id="img2">   
      <img src="Index.html_fichiers/img/prestations_h.png" border="0" width="190" height="20" id="img2_2">   
      </a>   
    </li>   
    <li>   
      <a href="localisation.html">   
      <img src="Index.html_fichiers/img/localisation.png" border="0" width="190" height="20" id="img3">   
      <img src="Index.html_fichiers/img/localisation_h.png" border="0" width="190" height="20" id="img3_3">   
      </a>   
    </li>   
    <li>   
      <a href="contact.html">   
      <img src="Index.html_fichiers/img/contact.png" border="0" width="190" height="20" id="img4">   
      <img src="Index.html_fichiers/img/contact_h.png" border="0" width="190" height="20" id="img4_4">   
      </a>   
    </li>   
  </ul>   
</div>


et les 2 fichiers javascript (autre que la librairie Jquery):

fading.js 
    $(document).ready(function(){   
     $("#img1").hover(function(){   
        $("#img2").fadeIn(250);   
     $("#img3").fadeIn(250);   
     $("#img4").fadeIn(250);   
     $("#img1").fadeOut(250);   
      });   
   $("#img2").hover(function(){   
        $("#img1").fadeIn(250);   
     $("#img3").fadeIn(250);   
     $("#img4").fadeIn(250);   
     $("#img2").fadeOut(250);   
      });   
   $("#img3").hover(function(){   
        $("#img1").fadeIn(250);   
     $("#img2").fadeIn(250);   
     $("#img4").fadeIn(250);   
     $("#img3").fadeOut(250);   
      });   
   $("#img4").hover(function(){   
        $("#img1").fadeIn(250);   
     $("#img2").fadeIn(250);   
     $("#img3").fadeIn(250);   
     $("#img4").fadeOut(250);   
      });   
   $("#contenu").hover(function(){   
     $("#img1").fadeIn(250);   
     $("#img2").fadeIn(250);   
     $("#img3").fadeIn(250);   
     $("#img4").fadeIn(250);   
      });    
   $("#contenu2").hover(function(){   
     $("#img1").fadeIn(250);   
     $("#img2").fadeIn(250);   
     $("#img3").fadeIn(250);   
     $("#img4").fadeIn(250);   
      });    
   $("#contenu3").hover(function(){   
     $("#img1").fadeIn(250);   
     $("#img2").fadeIn(250);   
     $("#img3").fadeIn(250);   
     $("#img4").fadeIn(250);   
      });   
  });


menuhover.js 
   $(document).ready(function(){   
  if(("#img1").hidden   
    {("#img1_1").fadeIn(250);   
  });   
  else(("#img1_1").fadeOut(250);   
  )});   
   $(document).ready(function(){   
  if(("#img2").hidden   
    {("#img2_2").fadeIn(250);   
  });   
  else(("#img2_2").fadeOut(250);   
  )});   
   $(document).ready(function(){   
  if(("#img3").hidden   
    {("#img3_4").fadeIn(250);   
  });   
  else(("#img3_3").fadeOut(250);   
  )});   
   $(document).ready(function(){   
  if(("#img4").hidden   
    {("#img4_4").fadeIn(250);   
  });   
  else(("#img4_4").fadeOut(250);   
  )});



fading.js fait correctement son travail, pas de problème ;)
il s'agit de menuhover.js que j'ai créé, malgré le fait que je soit débutant avec le JS, entièrement à la main: il ne semble rien faire...

De plus, j'aimerais que les images qui ont pour id "img1_1", "img2_2", "img3_3" et "img4_4" soient caché dès que la page est en chargement, jusqu'au moment où elles doivent entrer en action.

Quelqu'un qui pourrait m'aider? merci! :)



Les amis de mes amis sont mes amis. Les membres de CCM sont mes amis. Google est l'ami des membres de CCM. Donc Google est mon ami.

3 réponses

Réponse 1 / 3
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
20 mars 2011 à 04:58
Bonjour,

te manque le $ pour que ca marche

$("#img2").hidden

bien que je soit pas sur que le $ te récupère réellement l objet img2.. j utiliserais plutot un getelementbyid()...

et pour cacher tes images au démarrage :

<img src="Index.html_fichiers/img/prestations.png" style="visibility:hidden;border:0px;width:190px;height:20px" id="img2">


0
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 109
20 mars 2011 à 18:36
je vais tester ca de suite, et je te tiens au courant ;)
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
22 mars 2011 à 04:51
Et donc ???
0
Réponse 2 / 3
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 109
22 mars 2011 à 18:02
et donc, les image ne s'affichent pas aux chargement de la page, c'est un premier point qui marche ;)

Par contre ces même images (qui sont des images de substitutions) n'apparaissent pas lorsque la fonction fadeIn le nécessite

en fait je voudrais que le code fonctionnel (en JS) correspondent à cette manière littéraire de le dire:
"Si l'élément identifié par img1 est cachée (invisible), montrer l'élément img1_1. Sinon cacher l'élément img1_1"

autre chose à proposer?
0
Réponse 3 / 3
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
Modifié par jjsteing le 22/03/2011 à 19:18
Hey :)

donc garde le hidden dans ton code par défault (cad au chargement de ta page).
Nomme l'id de toutes tes images exactement pareil : Img1, Img2, Img3, ect...

Et en js la fonction devrait etre du style :

function AfficheImage(NomIdImg){
for (i=1 to 3) {//suivant le nb d image
document.getelementbyid("Img" + i).hidden=true //on cache tts les images
}
document.element.getelemntid(NomIdImg).hidden=false //on affiche l image voulue
}


enfin, t arrange a ta sauce.. je connais pas ton code ;)
mais je peux t aider au besoin ;)

@++

Courage.. la route est longue et vallonnée d'obstacles, mais une pente douce est toujours après la montée :p hi hi.. j suis philo ce soir ;)

N'hésitez pas à poser des questions, il vaut mieux être con 5 min que le rester toute sa vie ;)
N'oubliez pas de mettre votre Post en 'Résolu' quand c'est le cas :-D
0
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 109
22 mars 2011 à 19:49
j'ai une 'tite idée d'arrangement pour ce code ;) j'vais tester, et ca devrais marcher ;)
0
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 109
Modifié par abcdu44 le 22/03/2011 à 20:39
nan ca a pas l'air de marcher...
y'a pas moyen d'utiliser mon "menuhover.js" ? (voir code en gras tout en haut)
0
jjsteing Messages postés 1669 Date d'inscription vendredi 11 mai 2007 Statut Contributeur Dernière intervention 21 mai 2012 181
Modifié par jjsteing le 23/03/2011 à 12:57
Donc si je résume.. tes images sont bien cachées au 1er démarrage de la feuille .. et après ?? elle s affichent toutes, ou ne s affiche pas ?? ou s affichent les unes après les autres ???
0
abcdu44 Messages postés 962 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 109
23 mars 2011 à 16:10
en fait, tu vois, j'veux faire un effet de roll over animé, mais pour éviter un temps de chargement trop long, j'préfère éviter de créer des SWF (en plus ca demanderais qu'adobe flash soit installé... ('fin je crois) ).

donc tu vois, j'ai 8 images différentes, qui vont par 2... ca fait 4 items

en fait, il faudrais que les 4 images "de survol" soit cachées au lancement de la page.. ca, c'est déja fait, et il reste alors 4 images, les images de "non-survol"

quand une image de "non-survol" est survolée par le pointeur, j'voudrais qu'elle disparaisse avec un effet de fondu (ce que j'arrive à faire avec un fadeOut), et qu'à la place, une image "de survol" prenne sa place avec un effet de fondu (ce que j'arrive à faire également avec un fadeIn), une fois que l'image de "non-survol" a complètement disparu.

Quand le curseur ne survole plus l'image, il faudrais alors que le contraire se fasse: l'image "de survol" disparait avec un effet de fondu (encore le fadeOut) et l'image de "non-survol" apparait avec effet de fondu (fadeIn).

Les images de "non-survol" sont celles identifiées img1 img2 img3 img4
Les images "de survol" sont donc img1_1 img2_2 img3_3 img4_4
0

Discussions similaires

Toutes la doc sur sap
katuicia -
bedda -

22 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
code couleur associé a une image
magic charly -
pandora -

9 réponses
FORMATION SAP DEBUTANT
zara93 -
georges97 -

6 réponses
Apprendre l'infographie gratuitement debutant
mor talla ndione -
thomasleprof -

2 réponses