28172 sujets

CSS et mise en forme, CSS3

Utilisation de skin

Bonjour à tous, voilà je me pose des questions en vu d'un certain problème.
J'ai un bouton dans mon site qui doit permettre de switcher entre deux modes: l'un ou toutes les images sont visibles et l'autre qui sert à les cacher en les dévoilant seulement avec l'état hover de la souris.

<link href="css/pro_sfx.css" rel="stylesheet" type="text/css" />
                <link  href="css/pro_sfx_skin2.css" rel="alternate stylesheet" type="text/css" title="pro_sfx_skin2"> 
                <script type="text/javascript" src="js/styleswitcher.js"></script> 
</head>

<body>
<div id="global">
	<div id="contenaire_left">
    	<div id="logo"><img src="img/titre/logo_header.png" alt="logo"/><a href="index.html"></a>
        </div>
        <div id="menu">
        	<ul id="btn_menu">
            	<li id="effet_speciaux_btn"><a class="bouton" href="professionnels.html">effet spéciaux</a></li>
                <li id="body_painting_btn"><a class="bouton" href="professionnels.html">body painting</a></li>
                <li id="mode_beaute_btn"><a class="bouton" href="professionnels.html">mode/beauté</a></li>
                <li id="theatre_btn"><a class="bouton" href="professionnels.html">theatre</a></li>
                <li id="formation_btn"><a class="bouton" href="professionnels.html">formation</a></li>
                <li id="experience_btn"><a class="bouton" href="professionnels.html">experience</a></li>
                <li id="contact_btn"><a class="bouton" href="professionnels.html">contact</a></li>
            </ul>
        </div>
    </div>
    <div id="contenaire_right">
    	<ul id="photo_presentation">
        	<li id="img01_01" class="modifier"><a id="img01" href="professionnels.html"  >img01_01</a></li>
            <li id="img01_02"><a id="img02" href="professionnels.html">img01_02</a></li>
            <li id="img01_03"><a id="img03" href="professionnels.html">img01_03</a></li>
            <li id="img01_04"><a id="img04" href="professionnels.html">img01_04</a></li>
            <li id="img01_05"><a id="img05" href="professionnels.html">img01_05</a></li>
            <li id="img01_06"><a id="img06" href="professionnels.html">img01_06</a></li>
            <li id="img01_07"><a id="img07" href="professionnels.html">img01_07</a></li>
            <li id="img01_08"><a id="img08" href="professionnels.html">img01_08</a></li>
            <li id="img01_09"><a id="img09" href="professionnels.html">img01_09</a></li>
            <li id="img01_10"><a id="img10" href="professionnels.html">img01_10</a></li>
            <li id="img01_11"><a id="img11" href="professionnels.html">img01_11</a></li>
            <li id="img01_12"><a id="img12" href="professionnels.html">img01_12</a></li>
            <li id="img01_13"><a id="img13" href="professionnels.html">img01_13</a></li>
            <li id="img01_14"><a id="img14" href="professionnels.html">img01_14</a></li>
            <li id="img01_15"><a id="img15" href="professionnels.html">img01_15</a></li>
            <li id="img01_16"><a id="img16" href="professionnels.html">img01_16</a></li>
            <li id="img01_17"><a id="img17" href="professionnels.html">img01_17</a></li>
            <li id="img01_18"><a id="img18" href="professionnels.html">img01_18</a></li>
            <li id="img01_19"><a id="img19" href="professionnels.html">img01_19</a></li>
            <li id="img01_20"><a id="img20" href="professionnels.html">img01_20</a></li>
            <li id="img01_21"><a id="img21" href="professionnels.html">img01_21</a></li>
            <li id="img01_22"><a id="img22" href="professionnels.html">img01_22</a></li>
            [b]<li id="devoiler" class="modifier"><a id="devoil" onclick="setActiveStyleSheet('pro_sfx_skin2'); return false;">"Activer la skin "classique"</a></li>[/b]

        </ul>
    </div>
</div>

</body>
</html>


et deux css 

#global {
	margin:0 auto;
	width: 990px;
}

body {background:url(../sfx_01_fond.jpg); background-repeat:no-repeat
}

#contenaire_left {position:absolute; top:10px; width:359px;
}

#contenaire_right {width:540px; margin-left:395px; height:580px;/* border:#00FF00 solid 1px;*/
}

#logo { margin-top:50px; margin-left:30px;
}

	/*boutons de menu*/
	
#btn_menu {
	list-style-type:none;
	padding-left:0px;
	width:217px;
}

a.bouton { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 217px;
	height: 35px;
	position:relative;
	margin-top:1px;
	
}

#effet_speciaux_btn { background:url(../img/boutons/bnt_effets_speciaux.png) left top no-repeat;
}

#body_painting_btn { background:url(../img/boutons/btn_bodypainting.png)left top no-repeat;
}

#mode_beaute_btn { background:url(../img/boutons/btn_mode.png) left top no-repeat;
}

#theatre_btn { background:url(../img/boutons/btn_theatre.png) left top no-repeat;
}

#formation_btn { background:url(../img/boutons/btn_formation.png) left top no-repeat; margin-top:5%;
}

#experience_btn { background:url(../img/boutons/btn_experience.png) left top no-repeat;
}

#contact_btn { background:url(../img/boutons/btn_contact.png) left top no-repeat; margin-top:5%;
}

#effet_speciaux_btn:hover, #body_painting_btn:hover, #mode_beaute_btn:hover, #theatre_btn:hover, #formation_btn:hover, #experience_btn:hover, #contact_btn:hover {
    cursor:pointer;
	background-position: left bottom;
}

	/*menu*/

#menu {margin-left:70px; margin-top:15%;
}

	/*image de presentation*/
	
#photo_presentation {
	list-style-type:none;
	padding-left:0px;
	margin-top:0px;
	/*border:#00F solid 1px;*/
	height:580px;
	position:relative;
}

	
#img01_01 { background:url(../img/photo_presentation/sfx/01_01.jpg) left top no-repeat; width:43px;position:absolute; bottom:30px; left:122px; 
}
#img01 {
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 43px;
	height: 63px;
}
#img01_01:hover {
    cursor:pointer;
	background-position: left bottom;
}

	
#img01_02 { background:url(../img/photo_presentation/sfx/01_02.jpg) left top no-repeat; width:156px; position:absolute; bottom:0px;left:167px;
}
#img02 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 156px;
	height: 93px;
}
#img01_02:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_03 { background:url(../img/photo_presentation/sfx/01_03.jpg) left top no-repeat; width:70px; position:absolute; bottom:0px;left:326px;
}
#img03 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 79px;
	height: 93px;
}
#img01_03:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_04 { background:url(../img/photo_presentation/sfx/01_04.jpg) left top no-repeat; width:69px; position:absolute; bottom:95px;left:122px;
}
#img04 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 69px;
	height: 209px;	
}
#img01_04:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_05 { background:url(../img/photo_presentation/sfx/01_05.jpg) left top no-repeat; width:68px; position:absolute; bottom:95px;left:194px;
}
#img05 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 68px;
	height: 73px;	
}
#img01_05:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_06 { background:url(../img/photo_presentation/sfx/01_06.jpg) left top no-repeat; width:88px; position:absolute; bottom:95px;left:264px;
}
#img06 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 88px;
	height: 50px;	
}
#img01_06:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_07 { background:url(../img/photo_presentation/sfx/01_07.jpg) left top no-repeat; width:68px; position:absolute; bottom:170px;left:194px;
}
#img07 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 68px;
	height: 92px;	
}
#img01_07:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_08 { background:url(../img/photo_presentation/sfx/01_08.jpg) left top no-repeat; width:124px; position:absolute; bottom:147px;left:264px;
}
#img08 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 124px;
	height: 87px;	
}
#img01_08:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_09 { background:url(../img/photo_presentation/sfx/01_09.jpg) left top no-repeat; width:124px; position:absolute; bottom:235px;left:264px;
}
#img09 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 99px;
	height: 27px;	
}
#img01_09:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_10 { background:url(../img/photo_presentation/sfx/01_10.jpg) left top no-repeat; width:72px; position:absolute; bottom:250px;left:48px;
}
#img10 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 72px;
	height: 54px;	
}
#img01_10:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_11 { background:url(../img/photo_presentation/sfx/01_11.jpg) left top no-repeat; width:57px; position:absolute; bottom:263px;left:194px;
}
#img11 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 57px;
	height: 41px;	
}
#img01_11:hover {
    cursor:pointer;
	background-position: left bottom;
}


#img01_12 { background:url(../img/photo_presentation/sfx/01_12.jpg) left top no-repeat; width:89px; position:absolute; bottom:263px;left:253px;
}
#img12 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 89px;
	height: 65px;	
}
#img01_12:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_13 { background:url(../img/photo_presentation/sfx/01_13.jpg) left top no-repeat; width:68px; position:absolute; bottom:306px;left:0px;
}
#img13 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 68px;
	height: 87px;	
}
#img01_13:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_14 { background:url(../img/photo_presentation/sfx/01_14.jpg) left top no-repeat; width:88px; position:absolute; bottom:306px;left:70px;
}
#img14 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 88px;
	height: 42px;	
}
#img01_14:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_15 { background:url(../img/photo_presentation/sfx/01_15.jpg) left top no-repeat; width:92px; position:absolute; bottom:306px;left:159px;
}
#img15 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 92px;
	height: 42px;	
}
#img01_15:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_16 { background:url(../img/photo_presentation/sfx/01_16.jpg) left top no-repeat; width:171px; position:absolute; bottom:350px;left:70px;
}
#img16 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 171px;
	height: 84px;	
}
#img01_16:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_17 { background:url(../img/photo_presentation/sfx/01_17.jpg) left top no-repeat; width:95px; position:absolute; bottom:351px;left:243px;
}
#img17 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 95px;
	height: 152px;	
}
#img01_17:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_18 { background:url(../img/photo_presentation/sfx/01_18.jpg) left top no-repeat; width:50px; position:absolute; bottom:395px;left:18px;
}
#img18 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 50px;
	height: 84px;	
}
#img01_18:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_19 { background:url(../img/photo_presentation/sfx/01_19.jpg) left top no-repeat; width:85px; position:absolute; bottom:435px;left:70px;
}
#img19 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 85px;
	height: 132px;	
}
#img01_19:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_20 { background:url(../img/photo_presentation/sfx/01_20.jpg) left top no-repeat; width:84px; position:absolute; bottom:435px;left:157px;
}
#img20 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 84px;
	height: 68px;	
}
#img01_20:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_21 { background:url(../img/photo_presentation/sfx/01_21.jpg) left top no-repeat; width:106px; position:absolute; bottom:504px;left:157px;
}
#img21 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 106px;
	height: 75px;	
}
#img01_21:hover {
    cursor:pointer;
	background-position: left bottom;
}



#img01_22 { background:url(../img/photo_presentation/sfx/01_22.jpg) left top no-repeat; width:54px; position:absolute; bottom:504px;left:265px;
}
#img22 { 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 54px;
	height: 52px;	
}
#img01_22:hover {
    cursor:pointer;
	background-position: left bottom;
}



[b]#devoiler { background:url(../img/photo_presentation/sfx/devoiler.jpg) left top no-repeat; width:96px;position:absolute; bottom:0px; left:0px; 
}
#devoil {
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 96px;
	height: 56px;
}
#devoiler:hover {
    cursor:pointer;
}
[/b]


et l'autre avec comme changement un background position bottom pour toute les images.

J'ai utilisé le styleswitcher.js qui marche bien dans un sens mais pas dans l'autre.
Un bouton peut-il lancer un style css dans un premier temps puis relancer le style css d'origine dans un deuxième temps? Peut-il donc avoir deux fonctions?
Merci pour votre aide et un grand merci à alsacréation.
Modifié par amaillet (10 May 2012 - 20:21)
Salut,

Pourquoi n'utiliserais-tu pas du JQuery ? Si c'est juste pour cacher les images, tu appliques un visibility:hidden sur toutes tes images lorsque tu cliques sur le bouton. Smiley cligne
Salut, désolé pour le retard mais en tout cas merci pour votre réponse. Après quelques recherchea sur la fonction toggle de Jquery, je suis enfin arrivé à se que je voulais.
J'ai mis ça dans mon head:
<script type="text/javascript">
jQuery(document).ready(function() {
$("#devoiler01_01, #devoiler01_011").click(function () {
$("#img01_01, #img01_02, #img01_03, #img01_04, #img01_05, #img01_06, #img01_07, #img01_08, #img01_09, #img01_10, #img01_11, #img01_12, #img01_13, #img01_14, #img01_15, #img01_16, #img01_17, #img01_18, #img01_19, #img01_20, #img01_21, #img01_22, #devoiler").toggle();
});
});
</script>

ça dans mon body:
 
<li id="img01_033"><a id="img03" href="professionnels.html">img01_03</a></li>
<li id="img01_03"><a id="img03" href="professionnels.html">img01_03</a></li>            <li id="img01_044"><a id="img04" href="professionnels.html">img01_04</a></li>            <li id="img01_04"><a id="img04" href="professionnels.html">img01_04</a></li>
<li id="img01_055"><a id="img05" href="professionnels.html">img01_05</a></li>            <li id="img01_05"><a id="img05" href="professionnels.html">img01_05</a></li>
<li id="img01_066"><a id="img06" href="professionnels.html">img01_06</a></li>
<li id="img01_06"><a id="img06" href="professionnels.html">img01_06</a></li>


et cela dans mon css:
#img01_03, #img01_033 { background:url(../img/photo_presentation/sfx/01_03.jpg) left no-repeat; width:79px; position:absolute; bottom:0px;left:331px; 
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 79px;
	height: 93px;
}
#img01_03 { background-position:top;
}
#img01_033 {background-position:bottom;
}
#img01_03:hover {
    cursor:pointer;
	background-position: bottom;
}



#img01_04, #img01_044 {  background:url(../img/photo_presentation/sfx/01_04.jpg) left top no-repeat; width:69px; position:absolute; bottom:95px;left:122px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 69px;
	height: 209px;
}
#img01_04 { background-position:top;
}
#img01_044 {background-position:bottom;
}
#img01_04:hover {
    cursor:pointer;
	background-position: bottom;
}




#img01_05, #img01_055 { background:url(../img/photo_presentation/sfx/01_05.jpg) left no-repeat; width:69px; position:absolute; bottom:95px;left:194px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 68px;
	height: 73px;	
}
#img01_05 { background-position:top;
}
#img01_055 {background-position:bottom;
}
#img01_05:hover {
    cursor:pointer;
	background-position: left bottom;
}





#img01_06, #img01_066 { background:url(../img/photo_presentation/sfx/01_06.jpg) left no-repeat; width:88px; position:absolute; bottom:95px;left:264px;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
	width: 88px;
	height: 50px;	
}
#img01_06 { background-position:top;
}
#img01_066 {background-position:bottom;
}
#img01_06:hover {
    cursor:pointer;
	background-position: left bottom;
}
.

Je ne sais pas ci il y a une meilleure méthode mais celle-ci marche.
Je ne sais pas ci ça à un rapport mais par contre je ne peux pas mettre la fancybox sur mes:
<li id="img01_033"><a id="img03" href="professionnels.html">img01_03</a></li>
            <li id="img01_03"><a id="img03" href="professionnels.html">img01_03</a></li>

ça ne marche pas.
Modifié par amaillet (13 May 2012 - 20:10)
Sujet clos
Aller à