bonjour,
Je suis débutant en informatique et j'ai développer un site internet pour un ami avec mootools.
Je sais qu'il n'est pas encore vraiment optimiser, mais pour le moment il marche ^^'.
Enfin il marche sur FF mais pas sur internet explorer et je ne sais vraiment pas pourquoi
.
voici le lien du site www.universan.fr
voici le code javascript:
Le soucis viendrais apparemment de l'écouteur d'événement pour fermer le menu.
j'espère que personne ne sera horrifier par mes fonctions qui devrais recevoir des paramètres
puisqu'elle font la même choses, je modifierais promis xD.
En esperant que vous pourrez m'aider, Merci.
Modifié par atebas (09 Mar 2010 - 13:49)
Je suis débutant en informatique et j'ai développer un site internet pour un ami avec mootools.
Je sais qu'il n'est pas encore vraiment optimiser, mais pour le moment il marche ^^'.
Enfin il marche sur FF mais pas sur internet explorer et je ne sais vraiment pas pourquoi
.voici le lien du site www.universan.fr
voici le code javascript:
<script type="text/javascript">
// Tween sur le menu + couleur --------------------------------------------------
var changerLogoBleu = function()
{
$('couleurLogo').setStyle('background', 'url("images/logoB.png")');
}
var changerLogoRouge = function()
{
$('couleurLogo').setStyle('background', 'url("images/logoR.png")');
}
var changerLogoVert = function()
{
$('couleurLogo').setStyle('background', 'url("images/logoV.png")');
}
var changerLogoOrange = function()
{
$('couleurLogo').setStyle('background', 'url("images/logoO.png")');
}
var couleurAcceuil = function()
{
$('bt1').setStyle('background', 'url("images/btn1.png")');
$('couleurLogo').setStyle('background', 'url("images/logoB.png")');
}
var ResetCouleurAcceuil = function()
{
$('bt1').setStyle('background', 'url("images/btn1off.png")');
}
var tweenerFunction1 = function()
{
$('box2').tween('height', '144px');
$('bt2').setStyle('background', 'url("images/btn2.png")');
//$('couleurLogo').setStyle('background', 'url("images/logoR.png")');
$('bt1').setStyle('background', 'url("images/btn1off.png")');
}
var tweenerFunction1Reset = function()
{
$('box2').tween('height', '36px');
$('bt2').setStyle('background', 'url("images/btn2off.png")');
if ( page == false )
{
$('bt1').setStyle('background', 'url("images/btn1.png")');
}
}
var tweenerFunction2 = function()
{
$('box3').tween('height', '72px');
$('bt3').setStyle('background', 'url("images/btn3.png")');
//$('couleurLogo').setStyle('background', 'url("images/logoV.png")');
$('bt1').setStyle('background', 'url("images/btn1off.png")');
}
var tweenerFunction2Reset = function()
{
$('box3').tween('height', '36px');
$('bt3').setStyle('background', 'url("images/btn3off.png")');
if ( page == false )
{
$('bt1').setStyle('background', 'url("images/btn1.png")');
}
}
var tweenerFunction3 = function()
{
$('box4').tween('height', '108px');
$('bt4').setStyle('background', 'url("images/btn4.png")');
//$('couleurLogo').setStyle('background', 'url("images/logoJ.png")');
$('bt1').setStyle('background', 'url("images/btn1off.png")');
}
var tweenerFunction3Reset = function()
{
$('box4').tween('height', '36px');
$('bt4').setStyle('background', 'url("images/btn4off.png")');
if ( page == false )
{
$('bt1').setStyle('background', 'url("images/btn1.png")');
}
}
// Lors d'un click vers une page ---------------------------------------------------
var tweenerMenuFermer = function(event)
{
page=true;
// tween fermeture menu ------------------------------------------------------------
$('menu').tween('width', '24px');
// ecouteur d'evenement pour ré-ouvrir le menu au survol ---------------------------
$('menu').addEvent('mouseover', tweenerMenuOuvrir);
if ( event.target.name == 4 )
{
$('page').setStyle('background', 'url("images/fiche4.png") no-repeat');
$('flecheD').setStyle('visibility', 'visible');
}
else
{
$('page').setStyle('background', 'url("images/fiche'+event.target.name+'.png") no-repeat');
}
$('page').tween('height', '550px');
}
// Lors d'un click dans une page ---------------------------------------------------
var tweenerMenuOuvrir = function()
{
page=false;
// tween ouverture menu ------------------------------------------------------------
$('menu').tween('width', '239px');
$('page').tween('height', '0px');
$('flecheD').setStyle('visibility', 'hidden');
$('flecheG').setStyle('visibility', 'hidden');
}
// Lors d'un click dans une page ---------------------------------------------------
var pageSuivante = function(event)
{
numPage += 1;
if( numPage == 2 || numPage == 1 )
{
$('page').setStyle('background', 'url("images/fiche7.png") no-repeat');
$('flecheG').setStyle('visibility', 'visible');
}
else
{
if( numPage == 3 )
{
$('page').setStyle('background', 'url("images/fiche8.png") no-repeat');
$('flecheD').setStyle('visibility', 'hidden');
}
}
}
var pagePrecedente = function(event)
{
numPage -= 1;
if( numPage == 1 )
{
$('page').setStyle('background', 'url("images/fiche4.png") no-repeat');
$('flecheG').setStyle('visibility', 'hidden');
$('flecheD').setStyle('visibility', 'visible');
}
else
{
if( numPage == 2 )
{
$('page').setStyle('background', 'url("images/fiche7.png") no-repeat');
$('flecheG').setStyle('visibility', 'visible');
$('flecheD').setStyle('visibility', 'visible');
}
}
}
window.addEvent('domready', function()
{
// écouteur et propriété sur/du menu -------------------------------------------------------------------------
// ecouteur d'evenement pour ouvrir et fermer le menu verticalement-----------------
// + changement de couleur des bouton ----------------------------------------------
var couleurLogo = "B";
var page = false;
numPage = 1;
$('box1').addEvent('mouseover', couleurAcceuil);
$('box1').addEvent('mouseout', ResetCouleurAcceuil);
$('box2').addEvent('mouseover', tweenerFunction1);
$('box2').addEvent('mouseout', tweenerFunction1Reset);
$('box3').addEvent('mouseover', tweenerFunction2);
$('box3').addEvent('mouseout', tweenerFunction2Reset);
$('box4').addEvent('mouseover', tweenerFunction3);
$('box4').addEvent('mouseout', tweenerFunction3Reset);
//$$('.categorie').addEvent('mouseover', ResetCouleurAcceuil);
$('bt1').addEvent('mouseover', changerLogoBleu);
$('bt2').addEvent('mouseover', changerLogoRouge);
$('bt3').addEvent('mouseover', changerLogoVert);
$('bt4').addEvent('mouseover', changerLogoOrange);
// Modifie l'opacité directement au chargement de page -------------------------------
$$('.box').setStyle('opacity', '0.8');
// Modifie la couleur de acceuil au chargement de page -------------------------------
$('bt1').setStyle('background', 'url("images/btn1.png")');
// ecouteur d'evenement pour fermer le menu lors d'un click sur un lien --------------
// soucis ici selon moi .... $$('.lien_btn').addEvent('click', tweenerMenuFermer);
// ecouteur d'evenement pour defiler les page dans produit ---------------------------
$('flecheD').addEvent('click', pageSuivante);
$('flecheG').addEvent('click', pagePrecedente);
}
);
</script>Le soucis viendrais apparemment de l'écouteur d'événement pour fermer le menu.
j'espère que personne ne sera horrifier par mes fonctions qui devrais recevoir des paramètres
puisqu'elle font la même choses, je modifierais promis xD.
En esperant que vous pourrez m'aider, Merci.
Modifié par atebas (09 Mar 2010 - 13:49)