11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous, j'ai utilisé le script de Benjamin D.C. pour faire ma galerie et tout fonctionnait bien, sauf que dans ma page j'ai aussi un script pour mon menu qui ne marche plus depuis à cause de ceci :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>

Mon menu était comme ceci : menu
(les images ne bougent plus maintenant)

voici le code de ma page :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu</title>
		<link href="produit.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="_common/js/mootools.js"></script>
		<script type="text/javascript" src="imageMenu.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script src="thumbs.js" type="text/javascript"></script>


</head>
<body margin: 0; text-align: center; leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

<div id="cadre">
<div id="logo"></div>
<ul id="imageMenu"> 
	<li class="societe"><a href="societe.html"></a></li> 
	<li class="productions"><a href="production.html"></a></li> 
	<li class="produits"><a href="produits.html"></a></li> 
	<li class="contact"><a href="contact.html"></a></li> 
</ul>

<div id="fondproduits"></div>
<div id="texte">Prov’herbes établissement en nom propre crée en octobre 1987.<br>
Nombre de personnes travaillant à temps complet dans l’entreprise*:10 <br>
L’établissement se situ dans le sud de la france , au centre d’un triangle défini par Arles, Nîmes, Avignon à distance égale des portes de la Camargue , des pieds du mont Ventoux et des prémisses des Cévennes.</div>


				
				<script type="text/javascript"> 
	window.addEvent('domready', function(){
		var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:385, border:0});
	});
</script>



<ul id="thumbs">		
  <li> 
    <a href="img/grand/produit-01.png">
      <img alt="Présentoir étuis herbes de Provence" 
        src="img/vignettes/produit-01.gif" /> 
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-02.png"> 
      <img alt="Étui herbes de Provence spécial poisson" 
        src="img/vignettes/produit-02.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-03.png">  
      <img alt="Étui herbes de Provence spécial Pâte, tomate, pizza" 
        src="img/vignettes/produit-03.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-04.png">  
      <img alt="Étui herbes de Provence spécial grillade, marinade, ragoût" 
        src="img/vignettes/produit-04.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-05.png">  
      <img alt="Étui herbes de Provence spécial fromage" 
        src="img/vignettes/produit-05.gif" />  
    </a> 
  </li> 
  
 <li> 
    <a href="img/grand/produit-06.png">  
      <img alt="Étui herbes de Provence Bio spécial mijoté, barbecue, marinade " 
        src="img/vignettes/produit-06.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-07.png">  
      <img alt="Étui herbes de Provence spécial agneau" 
        src="img/vignettes/produit-07.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-08.png">  
      <img alt="Présentoir étuis herbes de Provence" 
        src="img/vignettes/produit-08.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-09.png">  
      <img alt="Étui thym" 
        src="img/vignettes/produit-09.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-10.png">  
      <img alt="Étui laurier" 
        src="img/vignettes/produit-10.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-11.png">  
      <img alt="Étui thym/laurier" 
        src="img/vignettes/produit-11.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-12.png">  
      <img alt="Présentoir étuis thym, laurier, thym/laurier" 
        src="img/vignettes/produit-12.gif" />  
    </a> 
  </li> 
</ul></div>

							
	</body>
</html>


Avez-vous une solution à ce problème ?
Merci
virginie
je vais essayer de faire plus clair et concis :

j'avais mis en place un menu celui là : http://www.phatfusion.net/imagemenu/

J'ai voulu rajouter à ma page une galerie photo celle-là : http://www.alsacreations.com/xmedia/tuto/exemples/galerie-jquery/

Mais les 2 ensembles occasionnes une "incompatibilité de script" à cause de ce script :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
(qui sert à la galerie photo)

Merci pour vos solutions ! Smiley biggrin
Bonjour,

Tu essayes d'utiliser à la fois la bibliothèque JavaScript Mootools et la bibliothèque JavaScript jQuery. Il est possible techniquement de faire fonctionner les deux ensemble (par exemple, tu peux utiliser le mode No Conflict de jQuery, et une syntaxe de module pour ton code jQuery), mais je déconseille fortement cette approche car tu obliges l'utilisateur à télécharger puis exécuter deux bibliothèques JavaScript assez lourdes, ce qui va donner un temps de chargement de chaque page plus long que nécessaire. Et la réactivité, c'est important pour une expérience utilisateur convaincante.

Faire des copier-coller de scripts jQuery, Mootools ou Scriptaculous parce qu'ils correspondent (visuellement et au niveau du comportement) à ce que l'on souhaite faire est une erreur. Il vaut mieux choisir en amont UNE bibliothèque JavaScript, et apprendre à l'utiliser. On peut ensuite utiliser des scripts qui exploitent cette bibliothèque, et créer les siens lorsque nécessaire. Les critères pour choisir une bibliothèque sont multiples (on peut aussi choisir de n'en utiliser aucune Smiley cligne ), et la facilité d'apprentissage ou le nombre et la qualité des «plugins» disponibles en font partie. Pour ma part je recommanderais plutôt jQuery, mais on peut préférer une autre bibliothèque.
Merci pour ton message, Florent V. je comprend bien ton point de vue,
Mais je tiens à t'expliquer le mien...Je t'assure que si mes clients étaient + riches ou + généreux Smiley langue , Je prendrais une partie du budget et la donnerais à un programmeur expérimenté, pour me débarrasser de cette partie qui est complètement imbuvable pour moi qui n'est pas un cerveau adapté à cette logique...
Je fais tous les efforts possibles mais...
Je suis graphiste et je galère..
oui il faudrait donc que je me contente de chose simple mais...

Je préfère si tu veux bien m'aiguiller un peu "me passer de bibliothèque"
Merci pour ta réponse
virginie
virge a écrit :
si mes clients étaient + riches ou + généreux Smiley langue

Euh, une seconde...
Donc tu vends à tes clients quelque chose que tu ne maitrises pas, en sachant que ça te condamne plus ou moins à faire un truc pas optimal (si tu y arrives), ou bien à ne pas y arriver (pas bon...), ou bien à y passer un temps excessif pour aboutir à un truc pas optimal (en y arrivant tant bien que mal). Donc si je comprends bien, soit tes clients ont un problème (prestation de faible qualité), soit c'est toi qui en as un (tu y passes trop de temps et tu perds de l'argent). Dans le pire des cas tout le monde y perdra.

Ça a l'air bien fun.

Bon, là tout de suite je passe pour un donneur de leçons. J'assume. Je rajoute juste que mes leçons ne valent pas forcément grand chose, qu'elles forcent parfois le trait, et enfin que je connais un minimum la situation que je critique (s'engager sur une presta que l'on ne maitrise pas), même si j'évite ça autant que possible.

Et je préviens au cas où: je vais continuer à donner des leçons dans ce message. Mais on va essayer de faire un peu plus pratique et directement utile au fur et à mesure.

virge a écrit :
Je suis graphiste et je galère..

Solutions à moyen terme:

1. Apprendre JavaScript. Peaufiner HTML et CSS si besoin (accessibilité, positionnement, performances, veille technologique...). Améliorer ses compétences en intégration web pour pouvoir se définir comme graphiste et intégrateur web (HTML, CSS, JavaScript). Quitte à viser un niveau expert en graphisme et moyen en intégration (et donc à botter en touche sur les intégrations les plus exigeantes).

2. Travailler avec un intégrateur web, ou un graphiste-intégrateur qui accepterait des travaux d'intégration, ou un développeur-intégrateur. Enfin quelqu'un que ça intéresse et qui a les compétences.

3. Refuser les projets où le budget intégration est trop faible pour faire appel à un intégrateur. Si le budget est trop faible pour faire appel à un freelance sur l'intégration, ce n'est pas en prenant en charge l'intégration que tu vas gagner des sous: tu vas juste réduire ta marge, voire perdre de l'argent. À la rigueur et si possible, essaie d'obtenir uniquement le design ergo et graphique. Pas évident, mais peut-être salutaire.

Ces solutions ne s'excluent pas toutes mutuellement.

virge a écrit :
Je préfère si tu veux bien m'aiguiller un peu "me passer de bibliothèque"

Dans le cas présent, «se passer de bibliothèque» signifie virer également les deux scripts utilisés (menu en images et galerie). Ces scripts ont besoin des bibliothèques en question pour fonctionner.

À court terme, c'est à dire pour le problème qui te préoccupe là tout de suite, je vois trois solutions (demandant toutes quelques heures de travail au minimum).

1. Garder Mootools. Tu peux alors virer jQuery, et dans ce cas tu dois virer le script de galerie d'image qui a besoin de jQuery. Que faire alors? Trouver un script utilisant Mootools et qui donne accès à la même fonctionnalité. Puis intégrer ce script à ta page. Probabilité de trouver un script Mootools satisfaisant: je dirais deux sur trois, peut-être moins.

2. Garder jQuery. Tu peux alors virer Mootools, et dans ce cas tu dois virer le script de menu en images qui a besoin de Mootools. Ensuite, chercher un script jQuery qui permette d'obtenir la même fonctionnalité. Puis intégrer ce script à ta page. Probabilité de trouver un script qui va bien: je dirais trois sur quatre.

3. Garder à la fois Mootools et jQuery. Lire la documentation de jQuery sur le mode No Conflict. L'appliquer. Tester. Relire la doc si besoin. Tester. Ça devrait marcher.

Somme de travail pour chaque solution: difficile à prévoir. Quelques heures au minimum pour les deux premières. Peut-être un peu moins pour le mode No Conflict, sauf si tu bloques sur l'application.

Solution qui donne le résultat de meilleure qualité: la 1 ou la 2. Je déconseille la 3.

Voilà, fin des leçons, j'espère que certaines informations auront été utiles. Smiley cligne
Bonjour Florent,
Je suis d'accord avec toi, disons que j'aurais dû me contenter d'un menu basic en css à mon niveau... Mais comme tu le sais aussi le web c'est toujours un peu de l'expérimentation, et chaque fois que je fais un site, je travaille sur la partie graphique, fonctionnelle avec le mode de navigation, et après seulement je me pose la question : vas-tu réussir à le faire ?
Et c'est seulement comme ça qu'on évolue et qu'on apprend des choses.. Cette fois j'ai appris à réaliser mon site en css !
Je ne fais pas suffisamment de site internet pour en faire ma spécialité et me former pour ça... Je suis autodidacte dans toutes mes compétences... Je perds du temps mais c'est pas grave, je ne suis pas dans le rendement, je veux juste gagner ma vie en prennant du plaisir à la tache..
Merci pour tes solutions, tu m'as bien expliqué, j'ai tout compris Smiley ravi
Je vais même suivre ton conseil et prendre la 2ème solution, même si j'ai peur de pas y arriver...
Et merci encore
virignie