mootools menu image

truitas · 23 Août 2009

bonjour à tous,

j'ai trouvé je viens de découvrir mootools et surtout un plungin qui m'intéresse. Vous pouvez le voir ici.

je voudrais réaliser l'exemple n 7. Cela fait plusieurs jours que je bidouille mais apparemment je n'ai rien compris. J'ai donc plusieurs questions:

1/Où mettre les fichiers mootools.js et byslidemenu-1.1.js ?

2/Où mettre les fichiers images?

3/Que mettre dans le code html? Le peu que j'ai compris est qu'il faut mettre entre les balise head deux lignes du type:

<script src="mootools.js" type="text/javascript"></script>
<script src="byslidemenu-1.1.js" type="text/javascript"></script>

4/ Où mettre le code javasript pour l'exemple 7:

var pinovermenu = new BySlideMenu('pinovermenu', {pinMode: 'mouseover'});

5/Où mettre le code html de l'exemple 7:

   
	  <ul id="pinovermenu">

	  <li><img src="creditcards.jpg" /></li>

	  <li><img src="games.jpg" /></li>

	  <li><img src="computer.jpg" /></li>

	  <li><img src="eiffeltower.jpg" /></li>

	  <li><img src="electronic.jpg" /></li>

	  </ul>

merci d'avance pour vos réponses éclairées

bien cordialement

petit oubli:

Quel code faut il mettre pour que le clique sur l'image renvoi vers la page désirée? ou faut il le mettre?

merci

SStephane · 23 Août 2009

Hello,

1) ou tu veux, dans le code que tu as écrit, ils sont au même endroit que ta page html

2) ou tu veux, dans le code que tu as écrit, ils sont au même endroit que ta page html (x2)

3) bingo

4) tu peux le mettre dans le onload, c'est le plus logique

5) ou tu veux/tu en as besoin dans ta page

6) ajoute tout simplement une ancre :

<ul id="pinovermenu">
   <li><a href="/ta_page.html"><img src="creditcards.jpg" /></a></li>
 </ul>

Ca te donnera un truc du style :

<html>
<header>
<title>hello</title>
<script src="mootools.js" type="text/javascript"></script>
<script src="byslidemenu-1.1.js" type="text/javascript"></script>
<script  type="text/javascript">
function loadMenu()
{
  var pinovermenu = new BySlideMenu('pinovermenu', {pinMode: 'mouseover'});
}
</script>
</header>
<body onload="loadMenu();">
<ul id="pinovermenu">
   <li><a href="/ta_page.html"><img src="creditcards.jpg" /></a></li>
 </ul>
</body>
</html>

truitas · 24 Août 2009

salut et merci pour ta réponse,

j'ai essayé avec ce que tu m'a donné mais les images s'affichaient verticalement. Le menu et la mise en forme etaien absents.

j'ai trouvé un autre exemple plus simple à mettre en place mais je n'arrive toujours pas à créer un lien.

Je met en dessous le code pour le css.

j'espère que tu pourras me répondre

J'ai mis en ligne une page de test.

le code de la page est:

<!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>
		<script src="Phatfusion_fichiers/mootools.js" type="text/javascript"></script>
		<link href="Phatfusion_fichiers/imageMenu.css" type="text/css" rel="stylesheet"/>
		<script src="Phatfusion_fichiers/imageMenu.js" type="text/javascript"></script>
   </head>
<body>

	 <div id="kwick">
		 <ul class="kwicks">
			 <li class="kwick opt1"><span>abstract</span></li>
			 <li class="kwick opt2"><span>People</span> </li>
			 <li class="kwick opt3"><span>Nature</span> </li>

			 <li class="kwick opt4"><span>Urban</span> </li>
			 <li class="kwick opt5"><span>Abstract</span> </li>
		 </ul>
	 </div>
<script type="text/javascript">
			function test()
			{
				alert('Sélection : ' + myMenu.options.selected);
			}

			var myMenu = new ImageMenu($$('#kwick .kwick'),{openWidth:200, onClick: test});
		</script>
</body>

</html>

css

kwick {
	MARGIN-TOP: 20px; POSITION: relative
}
#kwick .kwicks {
	DISPLAY: block; MARGIN: 0px; HEIGHT: 250px
}
#kwick LI {
	FLOAT: left
}
LI:unknown {
	content: ""
}
#kwick .kwick {
	BORDER-RIGHT: #fff 2px solid; DISPLAY: block; BACKGROUND: #fff; OVERFLOW: hidden; WIDTH: 97px; CURSOR: pointer; HEIGHT: 200px
}
#kwick .kwick SPAN {
	DISPLAY: none
}
#kwick .opt1 {
	BACKGROUND: url(images/landscapes.jpg) #9ce782


}
#kwick .opt2 {
	BACKGROUND: url(images/people.jpg) #92bdfa


}
#kwick .opt3 {
	BACKGROUND: url(images/nature.jpg) #faa892


}
#kwick .opt4 {
	BACKGROUND: url(images/urban.jpg) #e78282


}
#kwick .opt5 {
	BACKGROUND: url(images/abstract.jpg) #000; BORDER-RIGHT-WIDTH: 0px
}

merci

Connexion

mootools menu image

Sujets conseillés

truitas

SStephane

truitas

Veuillez vous connecter pour commenter

Parcourir

Activité