Sujet Précédent Sujet Suivant

Moontool

Cro_mag Messages postés 172 Statut Membre -  
Cro_mag Messages postés 172 Statut Membre -
Bonjour,

Voila mon soucis :

Je suis tombé sur "imagemenu" de chez Phatfusion https://phatfusion.net/denver-mattress-doctors-choice-review/
j'ai donc pris le zip, mais vu les fichiers a l'interieur je vois pas comment l'installer (deja est ce possible de mettre ca sur un site en HTML ??)

Puis quand on lit un peu on voit que cela necessite l'installation au préalable de moontools. https://mootools.net/core
Et la je telecharge un fichiers ou c'est du code et du code a n'y rien comprendre. Qui plus est aucune notice... Génial

Alors est ce que quelqu'un pourrait m'aider svp ?

18 réponses

Réponse 1 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Pour ta culture générale, Mootools est un framework en Javascript, et "Imagemenu" un plugin pour ce framework.
Tu n'as pas besoin de savoir lire le code de mootools, mais il te faudra quand même des bases en Javascript.
Pour inclure les fichiers, c'est très simple : 
<script type="text/javascript" src="fichier.js"></script>
0
Réponse 2 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
Bonjour,

Merci pour ta réponse avion F-16.
Oui j'avais compris que moontools est un framework et que imagemenu un plugin.

Donc si je comprend bien..
<script type="text/javascript" src="fichier.js"></script> je mets ca dans ma balise head ?
je dispose juste le fichier mootools dans mon espace FTP

Pourrais tu m'expliquer la marche a suivre stp

Je dispose mes dossiers imagemenu aussi dans mon repertoire ? (common et imagemenu)
0
Réponse 3 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Il faut inclure Mootools et le plugin entre <head> et </head> :
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>
Inspire toi de l'exemple dans l'archive.
0
Réponse 4 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
Quel exemple ??

Ok faut mettre ces lignes dans head

dans imagemenu j'ai 2 dossiers
1) _common qui comprend 3 dossiers
a) img
b) css
c) js comprenant 2 fichier mootools.js
d) un fichier nommé .DS_STORE

2)imagemenu avec 1 dossier et 3 fichiers
a) dossier images
b) imagemenu.css
c) imagemenu.js
d) index.html

Comment je fais maintenant ?
Dsl ca fait boulet mais la je suis largué.
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Tu trouveras Mootools dans le dossiers "js" de "_common" : places le (mootools.js suffit, pas besoin de l'autre) dans le même dossier que ta page, à côté de "imageMenu.js"

Ensuite, inclus les deux JS :
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>

Pour terminer, inspire toi de l'exemple dans la page HTML déjà faite et de son CSS (pas celui dans _common) pour créer ton menu.
0
Réponse 6 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
j'ai placer mootools.js, mon dossier imagemenu etc..

voila des morceaux de mon code

<script type="text/javascript" src="../_common/js/mootools.js"></script>
<script type="text/javascript" src="imageMenu.js"></script>
<link href="file:///C|/Users/CALMEL/Documents/site pascal/imagemenu/imageMenu.css" rel="stylesheet" type="text/css" />

<div id="example">
<div id="imageMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="urban"><a href="#">Urban</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
</ul>
</div>

<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>

</div>

Dans ma partie création ca ressort correctement, mais une fois tester sur navigateur ca marche pas et il manque meme une image....
0
Réponse 7 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
L'image est indiquée dans le CSS.
0
Réponse 8 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
ok j'ai rattaché mon document a 2 feuilles de style main.css dans img/common et imagemenu.css

Les images apparaissent bien meme sur firefox, mais l'effet n'est pas la

Et mille mercis pour ton aide
0
Réponse 9 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Tu as oublié de changer l'url de Mootools : 
<script type="text/javascript" src="../_common/js/mootools.js"></script>
→ Si tu as fais ce que j'ai dis, mootools.js est dans le même dossier que ta page.
0
Réponse 10 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
oui mais comme j'ai mis le dossier complet j'ai modifié la ligne que tu as mises
0
Réponse 11 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
ca y est j'ai fait comme tu m'avais dit au départ et ca marche nikel
Pkoi ca ne marchais pas alors que j'avais bien changé l url de direction ???

Maintenant me reste plus qu'a l'integrer a mon site et a l'adapter aux dimensions que je souhaite etc...
J'aurais peut etre besoin de ton aide. Mais je ferais ca demain si j'ai le temps.

En tout cas vraiment merci avion f-16, tu apportes énormément a ce forum !
0
Réponse 12 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
Re, j'ai eu quelques instants pour essayer d'adapter ca a mon site,

Les images se mettent mais l'effet ne marche pas

</style>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

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

<link href="../_common/css/main.css" rel="stylesheet" type="text/css" />
<link href="../imagemenu/imageMenu.css" rel="stylesheet" type="text/css" />
</head>

<div id="images">
<div id="imageMenu">
<ul>
<li class="landscapes"><a href="#">Landscapes</a></li>
<li class="people"><a href="#">People</a></li>
<li class="nature"><a href="#">Nature</a></li>
<li class="urban"><a href="#">Urban</a></li>
<li class="abstract"><a href="#">Abstract</a></li>
</ul>
</div>

<script type="text/javascript">

window.addEvent('domready', function(){
var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
});
</script>
</div>

Edit :
Ca me dit mootools est introuvable, alors qu'il est bien dans mon repertoire et que ca marche sur la page que j'ai testé expres....
je comprends pas ce qu'il se passe.
0
Réponse 13 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
<link href="../_common/css/main.css" rel="stylesheet" type="text/css" />
Inutile d'inclure ce CSS, c'était juste pour la mise en page de l'exemple.

Ensuite, si je pouvais voir le résultat en ligne, ça serait plus simple.
0
Réponse 14 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
Comme mon ftp ne veut plus établir de connexion..
Ou est l'erreur sur la page ???
0
Réponse 15 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Tu inclus nul par mootools.js
0
Réponse 16 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
comment ca ??
0
Réponse 17 / 18
avion-f16 Messages postés 20368 Date d'inscription   Statut Contributeur Dernière intervention   4 509
 
Ton code source :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Galerie Photos : Australie, Venise, Cuba, Inde, Paris</title>
    
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <link href="style_accueil_galerie.css" rel="stylesheet" type="text/css" />
    
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <script type="text/javascript">/* ... */</script>
    <style type="text/css">/* ... */</style>
</head>
...
Alors ? Tu comprends mieux ?
0
Réponse 18 / 18
Cro_mag Messages postés 172 Statut Membre 1
 
oui oui je comprend, mais j'ai fait ma modif c'est le ftp qui merde..dsl
sur DW le fichier est bien modifié mais l'effet ne se produit pas, alors que sur ma page vierge ca marche

voila mon code 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galerie Photos : Australie, Venise, Cuba, Inde, Paris</title>
<link href="../style_accueil_galerie.css" rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<style type="text/css">
<!--
body {
	background-color: #000;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
<link href="../SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<link href="../imagemenu/imageMenu.css" rel="stylesheet" type="text/css" />

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

</head>

<body>
<div id="page">



  <div id="bando">Placez ici le contenu de  id "bando"<a href="menu_francais.html"><img src="../images/banniere_tuan_gallery_photographie.jpg" width="750" height="39" alt="Tuan-gallery" /></a></div>
  
  
  
  <div id="galerie">- GALERIE PHOTOS -</div>
  
  
  
  
  <div id="barrehaut"><hr width=850 size=1 /></div>
  
  
  
  <div id="images">
  
  <div id="imageMenu">
			<ul>
				<li class="landscapes"><a href="#">Landscapes</a></li>
				<li class="people"><a href="#">People</a></li>
				<li class="nature"><a href="#">Nature</a></li>
				<li class="urban"><a href="#">Urban</a></li>
				<li class="abstract"><a href="#">Abstract</a></li>
			</ul>
			</div>
		
		<script type="text/javascript">
			
			window.addEvent('domready', function(){
				var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:310, border:2, onOpen:function(e,i){alert(e);}});
			});
		</script>
  
  /div>
  
  
  
  <div id="barrebas"><hr width=850 size=1 /></div>
  <div id="centre">
    <p>&nbsp;</p>
    <p>Cette galerie photo presente une série de portfolios de photographies<br />
      Voila le résué de mes voyages en photographies.</p>
    <p>&nbsp;</p>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="../index.html">ACCUEIL</a>      </li>
      <li><a href="menu_francais.html">MENU</a></li>
      <li><a href="boutique-accueil.html">BOUTIQUE</a>      </li>
      <li><a href="#">ART &amp; ESSAIS</a></li>
      <li><a href="presentation.html">PRESENTATION</a></li>
      <li><a href="#">CONTACT</a></li>
      <li><a href="#">LIENS</a></li>
    </ul>
    <p>&nbsp;</p>
  </div>
  
  
  <p>&nbsp;</p>
  
  
  
  <div id="bas">Placez ici le contenu de  id "bas"</div>
  
  
  
  <div id="fin">Placez ici le contenu de  id "fin"</div>
  
  
  
Placez ici le contenu de  id "page"</div>
<script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
</script>
</body>
</html>
0