11496 sujets

JavaScript, DOM et API Web HTML5

Code générique ..

Bonjour,

J'ai plusieurs classes css .comp1, .comp2 .... et je voudrais leur appliquer une action identique lors d"un mouseover.
Existe t'il un moyen pour rendre ce code générique pour toutes mes .comp ?


		jQuery(function($){
			$(document).ready(function () {
				$('.box').hide();
				$('#p1').show();
			});
			
                        $('.comp1').append('<div class="overlay">');
			$('.comp1 area').mouseover(function() {	
                                   $('.comp1 .overlay').css({
						backgroundPosition : "1024px 0px"
					});
                        }
                 }


Merci ....
Geg
Hello,

Le plus simple, c'est de donner à chacun de tes élément une classe commune en plus de leur classe spécifique, par exemple .comp tout court.

Exemple : 

<div class="comp comp1">…</div>

L'utilisation de l'espace entre chaque classe permet d'en utiliser plusieurs en même temps pour un même élément. Smiley smile
Modifié par audrasjb (12 Apr 2014 - 15:14)
ok compris.

Le soucis c'est que je n'ai pas détaillé dans mon code javascript.
Je fais également des tests sur des éléments liés à la classe .comp1 en particulier.
En gros partout ou il y a des 1 ... p1, comp1-box1, click1


$('.comp1 area').mouseover(function() {				
				var index = $(this).index();
				var left = -index*1024-1024;				
				/* Afficher les zones si les box en 1er plan sont fermées */
				if ( $('#p1').is(":visible") && $('#comp1-box1').is(":hidden"))
				{					
					$('.comp1 .overlay').css({
					backgroundPosition : left+"px 0px"
					});
					/* Afficher click zone */
					divInfo = document.getElementById('click1');
					if (index==1)
						divInfo.style.display = 'block';
					else 
						divInfo.style.display = 'none';					
				}
				
			});


J suis pas codeur web ... je viens du dev Embarqué et suis un peu largué sur les langages et la syntaxe. Sorry Smiley cligne
Pourrais-tu donner un exemple de ton code HTML associé ?

Sinon, tu peux à partir de l'élément courant cibler son enfant ou son parent avec children() et parent(). Par exemple, $('.comp').children('.overlay') cible un élément portant la classe "overlay" et étant enfant d'un élément portant la classe "comp".

Pour plus de détails sur ton cas spécifique, il faudra donner un extrait de ton code HTML, une page en ligne ou isoler un extrait de ton code sur un outil comme jsFiddle, très pratique pour partager un problème sur un forum Smiley smile
Modifié par audrasjb (12 Apr 2014 - 15:25)
Ok merci. Voici la page html en question .... et le css après
Merci beaucoup de ton aide ... tu verras sans doute que le code n'est pas super clean.


<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Test</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
        <script type="text/javascript">
		
		jQuery(function($){
			$(document).ready(function () {
				$('.box').hide();
				$('#p1').show();
			});
			
			/**************************************************************/
			/* COMPETENCE 1 ***********************************************/
			/**************************************************************/
            $('.comp1').append('<div class="overlay">');
			$('.comp1 area').mouseover(function() {				
				var index = $(this).index();
				var left = -index*1024-1024;				
				/* Afficher les zones si les box en 1er plan sont fermées */
				if ( $('#p1').is(":visible") && $('#comp1-box1').is(":hidden"))
				{					
					$('.comp1 .overlay').css({
					backgroundPosition : left+"px 0px"
					});
					/* Afficher click zone */
					divInfo = document.getElementById('div-click1');
					if (index==1)
						divInfo.style.display = 'block';
					else 
						divInfo.style.display = 'none';					
				}
				
			});
			$('.comp1').mouseout(function(){
				if (!DivAffichee()) {
					$('.comp1 .overlay').css({
						backgroundPosition : "1024px 0px"
					});
				}
			});
			/* Box1 */
			$('a, .m11').click(function AfficherMasquer() {					
					divInfo = document.getElementById('comp1-box1');					
					if (divInfo.style.display == 'none')
					{
					divInfo.style.display = 'block';
					}
					else
					{divInfo.style.display = 'none';
					}			
			});				
			
			/**************************************************************/
			/* COMP 2 ***********************************************/
			/**************************************************************/			
            $('.comp2').append('<div class="overlay">');
			$('.comp2 area').mouseover(function() {				
				var index = $(this).index();
				var left = -index*1024-1024;	
				/* Afficher les zones si les box en 1er plan sont fermées */			
				if ( $('#p2').is(":visible") && $('#comp2-box1').is(":hidden"))
				{									 
					$('.comp2 .overlay').css({
					backgroundPosition : left+"px 0px"
					});
					/* Afficher click zone */
					divInfo = document.getElementById('div-click2');
					if (index==1)
						divInfo.style.display = 'block';
					else 
						divInfo.style.display = 'none';					
				}				
			});
			$('.comp2').mouseout(function(){
				if (!DivAffichee()) {
					$('.comp2 .overlay').css({
						backgroundPosition : "1024px 0px"
					});
				}
			});			
			/* Box1 */ 	
			$('a, .m21').click(function AfficherMasquer() {					
					divInfo = document.getElementById('comp2-box1');					
					if (divInfo.style.display == 'none')
					{
					divInfo.style.display = 'block';
					}
					else
					{divInfo.style.display = 'none';
					}			
			});		
							
			/**************************************************************/
			/* COMP 3 ***********************************************/
			/**************************************************************/			
            $('.comp3').append('<div class="overlay">');
			$('.comp3 area').mouseover(function() {				
				var index = $(this).index();
				var left = -index*1024-1024;	
				/* Afficher les zones si les box en 1er plan sont fermées */			
				if ( $('#p3').is(":visible") && $('#comp3-box1').is(":hidden"))
				{									 
					$('.comp3 .overlay').css({
					backgroundPosition : left+"px 0px"
					});
					/* Afficher click zone */
					divInfo = document.getElementById('div-click3');
					if (index==1)
						divInfo.style.display = 'block';
					else 
						divInfo.style.display = 'none';					
				}				
			});
			$('.comp3').mouseout(function(){
				if (!DivAffichee()) {
					$('.comp3 .overlay').css({
						backgroundPosition : "1024px 0px"
					});
				}
			});				
			/* Box1 */ 	
			$('a, .m31').click(function AfficherMasquer() {					
					divInfo = document.getElementById('comp3-box1');					
					if (divInfo.style.display == 'none')
					{
					divInfo.style.display = 'block';
					}
					else
					{divInfo.style.display = 'none';
					}			
			});	

			/**************************************************************/
			/* COMP 4 ***********************************************/
			/**************************************************************/			
            $('.comp4').append('<div class="overlay">');
			$('.comp4 area').mouseover(function() {				
				var index = $(this).index();
				var left = -index*1024-1024;	
				/* Afficher les zones si les box en 1er plan sont fermées */			
				if ( $('#p4').is(":visible") && $('#comp4-box1').is(":hidden"))
				{									 
					$('.comp4 .overlay').css({
					backgroundPosition : left+"px 0px"
					});
					/* Afficher click zone */
					divInfo = document.getElementById('div-click4');
					if (index==1)
						divInfo.style.display = 'block';
					else 
						divInfo.style.display = 'none';					
				}				
			});
			$('.comp4').mouseout(function(){
				if (!DivAffichee()) {
					$('.comp4 .overlay').css({
						backgroundPosition : "1024px 0px"
					});
				}
			});				
			/* Box1 */ 	
			$('a, .m41').click(function AfficherMasquer() {					
					divInfo = document.getElementById('comp4-box1');					
					if (divInfo.style.display == 'none')
					{
					divInfo.style.display = 'block';
					}
					else
					{divInfo.style.display = 'none';
					}			
			});								
			/**************************************************************/
			/* MENU  ******************************************************/
			/**************************************************************/
			$('.menu').append('<div class="overlay">');
			$('.menu area').mouseover(function() {
				var index = $(this).index();
				var left = index*120.5;
				
				$('.menu .overlay').css({
					backgroundPosition : left+"px 0px"
				});
			});					
			$('.menu').mouseout(function(){
				if ( $('#p1').is(":visible")){					
					$('.menu .overlay').css({
						backgroundPosition : "0px 0px"
					});
				};
				if ( $('#p2').is(":visible")){
					$('.menu .overlay').css({
						backgroundPosition : "120.5px 0px"
					});
				};
				if ( $('#p3').is(":visible")){
					$('.menu .overlay').css({
						backgroundPosition : "241px 0px"
					});
				};
				if ( $('#p4').is(":visible")){
					$('.menu .overlay').css({
						backgroundPosition : "361.5px 0px"
					});
				};													
			});					
		});
		
		function changePage1() {
			$('.box').hide();
			$('#p1').show();
		};
		function changePage2() {
			$('.box').hide();
			$('#p2').show();
		};
		function changePage3() {
			$('.box').hide();
			$('#p3').show();
		};	
		function changePage4() {
			$('.box').hide();
			$('#p4').show();
		};				
		function AfficherMasquer()
		{
			divInfo = document.getElementById('comp1-box1');			
			if (divInfo.style.display == 'none')
			{
			divInfo.style.display = 'block';
			}
			else
			{divInfo.style.display = 'none';
			
			}			
		};
		
		function DivAffichee()
		{
			divInfo = document.getElementById('comp1-box1');
			if (divInfo.style.display == 'none')
			{
				return false;			
			}
			else
			{			
				return true;
			}
						
		};		
			
			
			
        </script>
        <link rel="stylesheet" type="text/css" href="css/style.css" />
    </head>
<body>


    <div id="preloaded-images">
        <img src="img/bg1.png" width="1" height="1" alt="" />
        <img src="img/bg2.png" width="1" height="1" alt="" />
        <img src="img/bg3.png" width="1" height="1" alt="" />
        <img src="img/bg4.png" width="1" height="1" alt="" />
        <img src="img/bg5.png" width="1" height="1" alt="" />
        <img src="img/bg6.png" width="1" height="1" alt="" />
        <img src="img/bg7.png" width="1" height="1" alt="" />
        <img src="img/bg8.png" width="1" height="1" alt="" />
    </div>   
       
    <div id="p1" class="box">
        <div class="comp1">
            <img src="img/void.png"  width="1024" height="693" usemap="#Map1"/>
            <a href="#" alt="m11" class="m11"><div id="div-click1" style="position:relative;width:135px;height:75px;top:538px;left:535px;z-index:4;display:none;"></div><a>
            <div id="comp1-box1" style="position:relative;width:200px;height:250px;top:230px;left:525px;background:#fff;z-index:4;display:none;;line-height:16px;
            border:2px solid #f59330;border-radius: 10px;opacity: 0.8;padding:10px;">
                  <span style="font-weight:bold;font-size:12px;color:#f59330">TitreX</span>
                  <a href="#"><div style="position:relative;width:10px;height:10px;float:right;font-weight:bold">X</div></a>
                  <br><span style="font-size:10px;font-weight:bold">Lorem ipsum dolor sit amet, consectetur</span>
            </div>        
        <map name="Map1">
          <area shape="poly" coords="224,229,278,234,326,237,366,193,461,174,521,223,526,269,443,305,376,342,358,359,358,388,315,405,290,402,255,374,199,365,165,342"/>
          <area shape="poly" coords="333,616,445,577,491,566,535,517,584,469,603,455,651,462,704,427,687,382,632,351,572,326,513,287,497,287,424,326,378,359,358,397,303,418" />
          <area shape="poly" coords="664,163,758,74,868,89,935,170,919,197,772,356,712,415,669,350,597,298,599,163" />
        </map>     
        </div>
    </div>
     
    <div id="p2" class="box">        
        <div class="comp2">
        <img src="img/void.png"  width="1024" height="693" usemap="#Map2"/>
        <a href="#" alt="m21" class="m21"><div id="div-click2" style="position:relative;width:20px;height:20px;top:443px;left:493px;z-index:4;display:none"></div><a>
                    <div id="comp2-box1" style="position:relative;width:200px;height:250px;top:230px;left:525px;background:#fff;z-index:4;display:none;;line-height:16px;
                    border:2px solid #f59330;border-radius: 10px;opacity: 0.8;padding:10px;">
                      <span style="font-weight:bold;font-size:12px;color:#f59330">TitreX</span>
                      <a href="#"><div style="position:relative;width:10px;height:10px;float:right;font-weight:bold">X</div></a>
                      <br><span style="font-size:10px;font-weight:bold">Lorem ipsum dolor sit amet, </span>
        </div>         
        <map name="Map2" id="Map2">
          <area shape="poly" coords="167,440,228,326,231,257,329,272,379,207,476,276,554,301,542,388,407,369,272,438,235,464"  />
          <area shape="poly" coords="240,481,410,379,540,395,560,393,578,296,708,249,749,161,799,163,819,234,828,326,699,487,685,529,601,507,501,596,392,660,337,661"/>
          <area shape="poly" coords="513,272,605,276,692,238,714,122,628,120,602,95,593,76,564,75"/>
        </map>
    
        </div>  
    </div> 
    
    <div id="p3" class="box">        
        <div class="comp3">
        <img src="img/void.png" alt="" width="1024" height="693" usemap="#Map3"/>
        <a href="#" alt="m31" class="m31"><div id="div-click3" style="position:relative;width:20px;height:20px;top:443px;left:493px;z-index:4;display:none"></div><a>
                    <div id="comp3-box1" style="position:relative;width:200px;height:250px;top:230px;left:525px;background:#fff;z-index:4;display:none;;line-height:16px;
                    border:2px solid #f59330;border-radius: 10px;opacity: 0.8;padding:10px;">
                      <span style="font-weight:bold;font-size:12px;color:#f59330">TitreX</span>
                      <a href="#"><div style="position:relative;width:10px;height:10px;float:right;font-weight:bold">X</div></a>
                      <br><span style="font-size:10px;font-weight:bold">Lorem ipsum dolor sit amet, </span>
        </div> 
        <map name="Map3" id="Map3">
          <area shape="poly" coords="354,150,398,158,428,207,447,238,431,268,404,303,310,322,244,313,224,257,278,219,338,222" />
          <area shape="poly" coords="234,324,309,337,427,318,478,388,435,457,312,522,269,531,206,456,153,442" />                    
          <area shape="poly" coords="278,540,322,530,443,465,495,420,536,433,568,461,591,518,521,584,492,630,416,644,334,674"  />          
          <area shape="poly" coords="729,173,786,174,821,122,897,130,940,183,933,273,830,322,788,398,697,530,615,518,573,444,519,415,520,357,540,345,573,357"  />
          <area shape="poly" coords="483,362,431,297,441,263,468,211,533,178,606,126,716,128,716,173,691,207,571,348,536,339"  />
        </map>    
        </div>  
    </div>  
    
   
    <div id="p4" class="box">        
        <div class="comp4">
        <img src="img/void.png" alt="" width="1024" height="693" usemap="#Map4"/>
        <map name="Map4" id="Map4">
          <area shape="poly" coords="347,217,399,204,518,269,531,348,491,374,434,388,316,485,229,487,175,404,189,346" />
          
          <area shape="poly" coords="255,520,331,488,365,491,401,515,441,550,465,563,493,579,498,609,480,636,418,647,331,670" />
          
          <area shape="poly" coords="367,460,443,396,489,382,538,349,581,333,663,362,707,431,702,493,696,527,600,505,573,535,522,581,498,574,438,539"  />
          <area shape="poly" coords="599,334,664,349,755,287,764,216,686,172,603,158,571,174,543,282,567,315" />
        </map>
    
        </div>  
    </div> 
                                             
     <div class="menu">
         <img src="img/menu.png" width="1024" height="77"  usemap="#Mapmenu">
        <!-- <map name="Mapmenu">
           <area shape="rect" coords="29,8,115,58" href="#" onClick="changePage1()">         
           <area shape="rect" coords="122,8,207,59" href="#" onClick="changePage2()">
        </map>-->	         
          <map name="Mapmenu">
          	<area shape="rect" coords="35,10,147,77" href="#" onClick="changePage1()"/>
            <area shape="rect" coords="156,9,267,77" href="#" onClick="changePage2()"/>
            <area shape="rect" coords="276,10,387,76" href="#" onClick="changePage3()" />
            <area shape="rect" coords="395,9,508,77" href="#" onClick="changePage4()" />   	
          </map>     
    </div>     
            
            
    
</body>
</html>


et le css


body, html {margin:0;padding:0;}

a, img {outline:none;}
map > area,
map > area:active,
map > area:focus {outline: none; border:0; }

.box{
    display:block;
    width: 1024px;
    height: 693px;
}

.comp1, .comp2, .comp3, .comp4, .comp5, .comp6, .comp7, .comp8{
	width: 1024x;
    height: 693px;    
    position:relative;
}
.comp1 {background:url(../img/bg1.png) left top no-repeat;}
.comp2 {background:url(../img/bg2.png) left top no-repeat;}
.comp3 {background:url(../img/bg3.png) left top no-repeat;}
.comp4 {background:url(../img/bg4.png) left top no-repeat;}

.comp1 img, .comp2 img, .comp3 img, .comp4 img{position:absolute;top:0;left:0;z-index:3;}

.comp1 .overlay, .comp2 .overlay, .comp3 .overlay, .comp4 .overlay{
    width: 1024px;
    height: 693px;
    position:absolute;
	top:0;
	left:0;
	z-index:2;	
}
.comp1 .overlay {background:url(../img/bg1.png) 1024px top no-repeat;}
.comp2 .overlay {background:url(../img/bg2.png) 1024px top no-repeat;}
.comp3 .overlay {background:url(../img/bg3.png) 1024px top no-repeat;}
.comp4 .overlay {background:url(../img/bg4.png) 1024px top no-repeat;}




.menu{
	width:1024px;
	height:77px;
	background:url(../img/menu.png) left top no-repeat;
	position:relative;
}

.menu .overlay{
	width:1024px;
	height:25px;
	background:url(../img/arrow.png) left top no-repeat;
	position:absolute;
    top:-7px;
    left:0px;	
}

/* preload */
#preloaded-images {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}
Administrateur
Bonjour,

(je n'ai pas lu le code complet du dernier message)
Tu peux combiner les sélecteurs jQuery et en utiliser de similaires à ceux de CSS3 pour arriver à une seule instruction du type :
$('[class^="comp"], [class*="1"]').mouseover(function () {
    /* */
});


Ce sélecteur jQuery s'appliquera aux éléments existants au chargement de la page qui ont :
- d'une part une classe commençant (^) par comp
Ex : .comp1, .comp2, .comp-qqch
- d'autre part une classe contenant le chiffre 1
Ex : .comp1, .comp111-qqch et je ne sais jamais si ce sont les id ou les class qui ne peuvent commencer par un chiffre / être composé d'un unique chiffre mais bref le nommage est toujours meilleur si ça commence par une lettre...

jQuery selectors documentation

^=, *= et $= sont repris des expressions régulières (regexp) si jamais tu connais déjà (^(.*)$)
Modifié par Felipe (13 Apr 2014 - 13:22)
Sujet clos
Aller à