Débutant JS: aide pour algorithme

abcdu44 Messages postés 963 Date d'inscription   Statut Membre Dernière intervention   -  
abcdu44 Messages postés 963 Date d'inscription   Statut Membre Dernière intervention   -
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 1670 Date d'inscription   Statut Contributeur Dernière intervention   181
 
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 963 Date d'inscription   Statut Membre Dernière intervention   111
 
je vais tester ca de suite, et je te tiens au courant ;)
0
jjsteing Messages postés 1670 Date d'inscription   Statut Contributeur Dernière intervention   181
 
Et donc ???
0
Réponse 2 / 3
abcdu44 Messages postés 963 Date d'inscription   Statut Membre Dernière intervention   111
 
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 1670 Date d'inscription   Statut Contributeur Dernière intervention   181
 
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 963 Date d'inscription   Statut Membre Dernière intervention   111
 
j'ai une 'tite idée d'arrangement pour ce code ;) j'vais tester, et ca devrais marcher ;)
0
abcdu44 Messages postés 963 Date d'inscription   Statut Membre Dernière intervention   111
 
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 1670 Date d'inscription   Statut Contributeur Dernière intervention   181
 
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 963 Date d'inscription   Statut Membre Dernière intervention   111
 
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
FORMATION SAP DEBUTANT
zara93 -
ddpois -

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

12 réponses
formation pratique sap
patricia -
na3im05 -

49 réponses
'JS/Agent.TS' Qu'est ce que c'est ?
TheFastBoost -
TheFastBoost -

17 réponses