Partage
  • Partager sur Facebook
  • Partager sur Twitter

Condenser un script

pour la production d'événements similaires

Sujet résolu
gwrsk
    30 novembre 2011 à 10:56:15

    Bonjour à tous!

    J'ai réalisé un sommaire qui produit des fadein et des fadeout pour la sortie et l'apparition des rubriques de ma page.

    J'ai donc des (quasi) mêmes événements qui se produisent au clic des têtes de rubriques, symbolisé par une image.

    Je pense qu'il est possible de simplifier le script, mais je ne sais pas comment m'y prendre? Si quelqu'un peut m'aider... et est-ce que simplifier le script va ralentir le chargement de page? Ou bien juste, ce serait pour le "plaisir"..?



    <img src="images/menu.png" name="imagefond"  border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:nico -->

<area shape="rect" coords="80,0,159,25" onmouseover="imagefond.src='images/lacase.png'" onmouseout="imagefond.src='images/menu.png'" id="lacase" class="wajax"/>


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#lacase").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>




<area shape="rect" coords="193,1,252,25" onmouseover="imagefond.src='images/bio.png'" onmouseout="imagefond.src='images/menu.png'"   id="bio"  class="wajax"/>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#bio").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=18 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>



<area shape="rect" coords="264,2,362,24" onmouseover="imagefond.src='images/musique.png'" onmouseout="imagefond.src='images/menu.png'"  id="musique" class="wajax" />

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#musique").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=13 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>




<area shape="rect" coords="380,1,480,26" onmouseover="imagefond.src='images/contact.png'" onmouseout="imagefond.src='images/menu.png'" id="contact" />


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#contact").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=23 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>


<area shape="rect" coords="503,0,584,26" onmouseover="imagefond.src='images/blog.png'" onmouseout="imagefond.src='images/menu.png'" id="blog" class="wajax"/>


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#blog").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=127 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>


<area shape="rect" coords="606,1,691,27" onmouseover="imagefond.src='images/liens.png'" onmouseout="imagefond.src='images/menu.png'" id="liens" />
</map>


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#liens").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=21 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>
    • Partager sur Facebook
    • Partager sur Twitter
    SixtyFourWarrior
      30 novembre 2011 à 11:02:27

      Bah écrit une fonction !
      • Partager sur Facebook
      • Partager sur Twitter
      Desolation
      • Javascript
        30 novembre 2011 à 11:04:05

        On peut pas faire moins optimisé avec ce code.

        A corriger :
        • Faire 1 seul .ready()
        • Faire 1 seul gestionnaire d'événement

        Apparemment seuls ces éléments changent : sélecteur, page (dans le load).

        Il faudrait nous montrer le code HTML de #lacase, #bio etc.
        • Partager sur Facebook
        • Partager sur Twitter
        http://chez-syl.fr/
        gwrsk
          30 novembre 2011 à 11:10:31

          ... je débute.

          Merci pour ta réponse!

          je pense que tu as compris les deux seuls éléments qui changeaient.

          Toute la div est là. As-tu besoin du contenu des pages?

          <div id = "marge">

<img src="images/menu.png" name="imagefond"  border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:nico -->

<area shape="rect" coords="80,0,159,25" onmouseover="imagefond.src='images/lacase.png'" onmouseout="imagefond.src='images/menu.png'" id="lacase" class="wajax"/>


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#lacase").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>




<area shape="rect" coords="193,1,252,25" onmouseover="imagefond.src='images/bio.png'" onmouseout="imagefond.src='images/menu.png'"   id="bio"  class="wajax"/>

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#bio").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=18 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>












<area shape="rect" coords="264,2,362,24" onmouseover="imagefond.src='images/musique.png'" onmouseout="imagefond.src='images/menu.png'"  id="musique" class="wajax" />

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#musique").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=13 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>




<area shape="rect" coords="380,1,480,26" onmouseover="imagefond.src='images/contact.png'" onmouseout="imagefond.src='images/menu.png'" id="contact" />


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#contact").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=23 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>







<area shape="rect" coords="503,0,584,26" onmouseover="imagefond.src='images/blog.png'" onmouseout="imagefond.src='images/menu.png'" id="blog" class="wajax"/>


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#blog").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=127 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>







<area shape="rect" coords="606,1,691,27" onmouseover="imagefond.src='images/liens.png'" onmouseout="imagefond.src='images/menu.png'" id="liens" />
</map>


<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function($) {
    $("#liens").click(function() { 
		var $periph = $('#periph');
		$periph.fadeOut(1600, function() {
			$periph.load('/wordpress/?page_id=21 #page', function() {
				$periph.fadeIn(2300, function() {
           if(this.style.removeAttribute) {
    this.style.removeAttribute('filter');
}
        }); 
			}); 
		});
    });
});
</script>





<script type="text/javascript">
$("#croix").live('click', function() 
{
$("#page").fadeOut(1600);
    });

</script>






</div>
          • Partager sur Facebook
          • Partager sur Twitter
          Desolation
          • Javascript
            30 novembre 2011 à 11:19:44

            Ah ok j'avais pas vu que les id étaient sur les <area>.

            Pour chaque <area> tu dois modifier le HTML comme ceci :
            • Ajouter une classe, par exemple "click"
            • Ajouter un data-url="ici_le_lien_a_charger"


            Par exemple pour #lacase :
            <area shape="rect" coords="80,0,159,25" onmouseover="imagefond.src='images/lacase.png'" onmouseout="imagefond.src='images/menu.png'" id="lacase" class="wajax click" data-url="/wordpress #page"/>



            jQuery.noConflict();
jQuery(document).ready(function($) {
    $('.click').click(function() {
        var $periph = $('#periph');
        var url = $(this).data('url');
        $periph.fadeOut(1600, function() {
            $periph.load(url, function() {
                $periph.fadeIn(2300, function() {
                    if (this.style.removeAttribute) {
                        this.style.removeAttribute('filter');
                    }
                });
            });
        });
    });
});


            Tu utilises ce code ensuite pour tous les autres éléments (modifie d'abord tous tes <area>).
            • Partager sur Facebook
            • Partager sur Twitter
            http://chez-syl.fr/
            gwrsk
              30 novembre 2011 à 11:23:06

              énorme

              merci

              j'essaie ça cet aprem
              • Partager sur Facebook
              • Partager sur Twitter

              Condenser un script

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur ●
              • Markdown