Bonsoir,
Tout d'abord, merci de m'avoir répondu.
Pour répondre à tes questions :
Le jquery est bien inclus, c'est la version disponible en ligne sur le site 1.6.1 "developers.google.com" qui est installée. Par contre, quand je mets la dernière version en ligne disponible la 1.10.2, les deux menus sont là mais le reste ne s'affiche plus.
J'ai essayé avec la fonction toggle, ça fonctionne toujours de la même façons.
Le code javascript est bien intégré lui aussi tout en bas de la page avant la balise </body>
Pour les deux menus fonctionne comme je le souhaite.
Par contre, c'est pour la partie des images où je rencontre une difficulté. La première image est bien active mais sans son texte, il faut cliquer sur la vignette pour que son texte apparaisse et quand je clique sur la deuxième vignette c'est toujours la première qui reste active et non la deuxième.
Je remets le code mais cette fois-ci complet
<!DOCTYPE html>
<html lang="en">
<head>
<title>Original Hover Effects with CSS3</title>
<meta charset="UTF-8" />
<!-- jQuery Content Panel Switcher - By Cheyne Wallace -->
<title>jQuery Content Panel Switcher - By Cheyne Wallace</title>
<!-- Style -->
<link rel="stylesheet" type="text/css" media="screen" href="style/demopage.css" />
<!-- JS -->
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/jquery.content-panel-switcher.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
jcps.fader(300, '#switcher-panel');
});
</script>
</head>
<body>
<div class="block">
<nav>
<ul>
<li><a id="competences" class="switcher actuel">compétences</a></li>
<li><a id="clients" class="switcher">clients</a></li>
</ul>
</nav>
<div id="switcher-panel"></div>
<!-- Dummy Data -->
<div id="competences-content" class="switcher-content show">
<ul id="navigation">
<li class="clair ">
<img src="img/profil/competences/experience.png" />
<a class="mask active" href="#image-1"></a>
</li>
<li class="fonce">
<img src="img/profil/competences/graphisme.png" />
<a class="mask" href="#image-2"></a>
</li>
<li class="clair">
<img src="img/profil/competences/animation.png" />
<a class="mask" href="#image-3"></a>
</li>
<li class="fonce">
<img src="img/profil/competences/integration.png" />
<a class="mask" href="#image-4"></a>
</li>
<li class="clair">
<img src="img/profil/competences/print.png" />
<a class="mask" href="#image-5"></a>
</li>
<li class="fonce">
<img src="img/profil/competences/photographie.png" />
<a class="mask" href="#image-6"></a>
</li>
</ul>
<section id="css3-gallery">
<ul>
<li id="image-1">
<h5>Expérience</h5>
<p>
Fort de 15 années d’expérience où j'ai eu l'occasion d'exercer mon métier dans de grandes agences,
telles que FCB Acam, Téquila, MRM WordWide, Grenade, Labrador, DDB Terre et Ciel, CultureProd,
Saatchi & Saatchi+DUKE, mes domaines de compétences vont de la création et production de supports
de communication visuelle pour le print et le digital.
</p>
</li>
<li id="image-2">
<h5>Graphisme</h5>
<p>
Création et production de visuel, retouche photographique, photo montage pour des landing page, e-mailing,
bannières publicitaire, habillage, application Facebook.
</p>
</li>
<li id="image-3">
<h5>Animation</h5>
<p>
Création et production d’animation pour des landing page, bannières publicitaire, habillage.
</p>
</li>
<li id="image-4">
<h5>Intégration</h5>
<p>
En autodidacte, j’apprends en troisième langue le HTML, CSS 2 et parfois le CSS3 et quelques formules pour
dynamiser une page web avec jQuery.
</p>
</li>
<li id="image-5">
<h5>Composition</h5>
<p>
Création de gabarit, feuilles de style, mise en page, règles typographique, report de correction,
photomontage, gestion des couleurs, forme de découpe, préparation des documents à l'impression,
suivi des étapes de validation.
</p>
</li>
<li id="image-6">
<h5>Photographie</h5>
<p>
Photographe amateur, mes photographies prennent leurs sources dans mes voyages et mes rencontres, ...
Je partage mes réalisations sur Instagram.
</p>
</li>
</ul>
</section>
</div>
<div id="clients-content" class="switcher-content">
<h2>Photography</h2>
Lorem ipsum ea cum congue bonorum, pri no natum clita. His ne vide omnis forensibus. Eum cetero imperdiet et. Id mutat mazim quo, recusabo consequat scribentur te pro, nam laudem eripuit at.
<br/>
Inani nominati sit eu. Te ubique cotidieque philosophia mel, vix id omnes iudico prompta. Ex usu nihil mediocritatem. Sea quod vituperata no, omittam offendit vel in. Noster voluptua luptatum id mea. Et voluptatum adversarium usu, rebum nominati recteque vix ei.
</div>
</div>
*{margin: 0; padding: 0;}
h2 {
line-height: 35px;
font-size: 30px;
}
.block {height: 416px; width: 940px;}
.header {height: 416px; width: 181px; position: relative;}
#switcher-panel {width: 759px; height: 416px; float: left; }
nav{width: 181px; height: 416px; margin: 0; padding: 0; float: left;}
nav li{list-style: none; height: 45px; text-transform: uppercase;}
nav li a{color: #1a1919; text-decoration: none;}
nav li a:hover{color: #e03f14;}
a, a:visited, a:hover {cursor: pointer;}
.switcher-content {display: none;}
#navigation{width: 759px; height: 416px; margin: 0; padding: 0;}
#navigation li{position: relative; width: 253px; height: 190px; list-style: none; float: left;}
#navigation li a{display: block; height: 190px; text-align: center; line-height: 253px;}
img {position: absolute; margin: auto; top: 0; bottom: 0; left: 0; right: 0; max-height: 95px; max-width: 126.5px;}
.mask {width: 253px; height: 190px; position: absolute; /*overflow: hidden; */}
.mask:hover {position:absolute; top: 0; left: 0; display:block; width:253px; height:190px; background-color: rgba(253,0,10,0.6);}
.clair{background: #a2a2a2;}
.fonce{background: #333131;}
section#css3-gallery, div#css3-gallery ul li{position: absolute; left:181px; top:416px; width: 759px; height: 30px; }
section#css3-gallery ul {position: relative;}
section#css3-gallery ul li{position: absolute; top: 0px; left: -2000px; max-width: 100%; list-style: none;}
section#css3-gallery ul li:target {top: 0px; left: 0px; /*margin-top: -22px;*/}
section#css3-gallery ul li h5 {font-family: 'allerbold', Arial, sans-serif; text-transform: uppercase; color: #1a1919; position: relative; font-size: 18px; padding-top: 27px; padding-bottom: 4px;}
section#css3-gallery ul li p {font: 16px/24px 'aller_lightregular' Helvetica,Arial,sans-serif; color: #1a1919; position: relative;}
.actuel{color: #e03f14;}
.active{background-color: rgba(253,0,10,0.6); }
(function($){
$('.switcher').click(function(){
$('.switcher').toggleClass( 'actuel' )
});
})(jQuery);
(function($){
$('.mask').click(function(){
$('.mask').toggleClass( 'active' )
});
})(jQuery);
