Aller au contenu

[JS] Intégration multibox

Ekina

Par Ekina
dans Programmation et Lignes de code

Messages recommandés

Ekina Apprenti

Ekina

Posté(e)
Posté(e)

Bonjour,

J'aimerais déclencher l'ouverture d'une box en cliquant sur une image qui a déjà un rollover.

J'ai téléchargé cette MultiBox qui gère le HTML : https://github.com/samuelbirch/MultiBox

J'ai appelé le fichier à la fin de mon body comme ceci 

<script type="text/javascript" src="Source/MultiBox.js"></script>

Le site du codeur dis d'initialiser le script comme ca 

window.addEvent('domready', function(){ 
   var overlay = new overlay(); 
   var box = new multiBox('mb', { 
       overlay: overlay
   }); 
});

J'ai bien sur indiqué

<script language="javascript">

devant avant de refermer le <script>.

Par contre je n'arrive pas à le faire fonctionner, je le place surement mal (J'ai essayé dans le <head> avant mon image ). Je voudrais que la box s'ouvre en cliquant sur l'image qui correspond à ce code.

<a href="site/myBigImage.jpg" class="mb" title="example title a" onmouseover="historiquehov.src='site/historiquehov.png';" onmouseout="historiquehov.src='site/historique.png';"><img src="site/historique.png" name="historiquehov" alt="historique" border="0" /></a>

Le myBigImage.jpg dans le href est juste là pour arriver à faire fonctionner le code dans un premier temps. Je voudrais ensuite appeler une page HTML avec un tableau simple avec une image et un paragraphe de texte. Mon image est dans un td. C'est un site que je réalise pour un cours et oui, j'ai le droit d'utiliser du JavaScript car je suis en avance mais pas de CSS car les autres ne l'ont pas vu... Logique . Par contre je ne connais que très peu de choses en JavaScript ; j'ai passé la soirée à lire des tutos et à comparer des codes mais je ne parviens toujours pas à faire apparaitre cette boite. Il y avait aussi des dossiers avec des CSS et des images lorsque j'ai téléchargé la MultiBox, je les ai placé à la racine, je suppose que le .js avait déja intégré le chemin ?

Un grand merci d'avance en tout cas pour le temps que vous prendrez à me lire.

Lien vers le commentaire
Partager sur d’autres sites
Fuinril Collaborateur

Fuinril

Posté(e)
Posté(e)

C'est un peu light comme infos, pourrais tu donner les erreurs que le script te renvoit ?

En premier lieu c'est un script prévu pour mootools, donc il te faut mootools pour le faire fonctionner ( http://mootools.net/ ). Au passage attention, mootools a changé de version il y a peu et la dernière n'est pas forcément compatible avec le script (j'ai eu quelques surprises, prend la version avec compatibilité).

Ensuite il faut savoir que <script language="javascript"> est déprécié depuis plusieurs année et ne fonctionne plus (du moins plus partout). La syntaxe correcte est "<script type='text/javascript'>".

Ensuite tu es sûr que tes events sur mouseover/out fonctionnent ? Je ne connais pas cette syntaxe... (ce qui ne veux pas dire qu'elle n'existe pas mais j'ai quand même des doutes). D'ailleurs sauf erreur "name" n'est pas un attribut valide w3c pour img. Si tu changes le "name" de ton image en "id" et que tu change ton "historiquehov.src=" par "$('historiquehov').src=" (si tu utilises mootols, mais ce n'est pas vraiment un choix) ou encore "document.getElementById('historiquehov').src=" je pense que ça devrait mieux fonctionner.

Pour le reste l'initialisation me semble correcte.

En espérant t'avoir aidé.

Edit : 2-3 choses encore. Le bloc domready tu peux le placer ou tu veux, il ne s'exécutera qu'après le chargement complet de la page, dans le head ce n'est pas une erreur. Il faut impérativement que ton lien soit vide (pas de href) sinon le navigateur va executer le script puis suivre le lien (dans la pratique tu ne vois que le changement de page, même si le script fonctionne), il faut savoir que l'absence de href n'empeche pas les events de se déclencher (event onclick dans ce cas là).

Lien vers le commentaire
Partager sur d’autres sites
Ekina Apprenti

Ekina

Posté(e)
  • Auteur
Posté(e)

Merci pour cette réponse complète. J'ai finalement réussis à obtenir le même résultat avec un script diffèrent. Je vais modifier avec la bonne syntaxe.

Le mouseover/out fonctionne en tout cas. Quand au name, il est lié a 

"<script type='text/javascript'>"
      <!--
       historiquehov= new Image( );
       historiquehov.src="site/historiquehov.png";
      //-->
"</script>"

qui me permet de faire le rollover. Je pense que c'est une méthode dépassée mais c'est celle qui m'a été montrée lors de mon cours...

Par rapport au .js que j'ai finalement utilisé, je l'ai placé en fin de body pour être sur qu'il se charge en dernier ( Bonne méthode d'apres le siteduzero ). Est ce toujours utile ?

Lien vers le commentaire
Partager sur d’autres sites
Fuinril Collaborateur

Fuinril

Posté(e)
Posté(e)

Et bah comme quoi on en apprend tous les jours... Je ne connaissais absolument pas cette façon de gérer les images en js.

Bon maintenant vous apprendre ce genre de chose en cours je trouve ça abominable (où comment donner de mauvaises habitudes... d'ailleurs ça a pas l'air de fonctionner sur chrome) mais c'est un autre débat :reflechis:

Pour répondre à ta question c'est un peu vague, disons que dans 80% des cas c'est une bonne méthode mais ça dépend.

PS : var historiquehov= new Image( ); sera mieux que historiquehov= new Image( ); : certains navigateur tolèrent mal les variables js non déclarées, enfin c'est du détail.

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

Aller sur la liste des sujets
×
×
  • Créer...