afficher/masquer calque dans feuille de style

vector · 4 Novembre 2009

Bonjour... Bon je vais essayer d'être clair, car pour moi c'est très compliqué :

J'utilise une galerie jquery : exemple galerie
Je voudrais rajouter un petit texte explicatif au clic de chaque petite image et s'afficherai à côté des grandes...
Est-ce possible ?
Merci

le code css :

Bloc de code:

/**************************************************************

	Image Menu
	v 2.2

**************************************************************/
ul#imageMenu { position: relative; top: -15px; width: 1010px; height: 175px; list-style:none; padding:0; }

ul#imageMenu li { float: left; }

ul#imageMenu li a { width:250px; height: 175px; cursor: pointer; display: block; }

ul#imageMenu li.societe a { background-image: url(img_menu/societe.jpg); }

ul#imageMenu li.productions a { background-image: url(img_menu/productions.jpg); }

ul#imageMenu li.produits a { background: url(img_menu/produits.jpg) 0 50%; }

ul#imageMenu li.contact a { background: url(img_menu/contact.jpg) 0 50%; }


a:link { color: #fb1eec; }
a:hover { color: purple; }
a:visited { color: #800080; }
a:active { color: #800080; padding: 0; }
.clear {
	clear: both;
}
#cadre { background-image: url(img/fond_noir.gif); margin-left: auto; margin-right: auto; width: 1000px; height: 770px; margin-top:-15px }

#logo { background-image: url(img/logo.jpg); background-repeat: no-repeat; width: 1000px; height: 72px; margin-top: 10px; }

body { background-color: white; background-image: url(img/fond.jpg); background-repeat: no-repeat; background-attachment: fixed; }

#texte { color: black; font-size: 13px; font-family: Geneva, sans-serif, Arial, Helvetica, SunSans-Regular; font-variant: small-caps; line-height: normal; text-align: justify; width: 350px; height: 400px; visibility: hidden; margin-top: -300px; margin-left: 620px; }
#fondproduits { background-image: url(img/fond_produits.gif); margin-top: -20px; margin-right: auto; margin-left: auto; width: 990px; height: 405px; }
img { vertical-align:middle; border-style: none; list-style-type: none; list-style-image: none; } 
#thumbs { width: 1010px; height: 755px; overflow:auto; margin-top: -100px; margin-right: auto; margin-left: auto; list-style:none; } 
#thumbs li { float:left; list-style-type: none; list-style-image: none; } 
#thumbs a { margin: 9px; display:block; outline:none medium; cursor: pointer; } 
#thumbs a:hover, #thumbs a:focus {background:#fff;} 
#thumbs a.active {background:#000;} 
#viewer { width: 1000px; height: 755px; margin-top: -1180px; margin-right: auto; margin-left: auto; } 
#viewer img[src*="loader"] { margin-top: -600px; margin-right: auto; margin-left: auto; }

/*************************************************************/

le code de ma page :

Bloc de code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>menu</title>
		<link href="produit.css" rel="stylesheet" type="text/css" />
		<style type="text/css" media="screen"><!--
#imageMenu { height: 175px; width: 1010px; top: -15px; position: relative; visibility: visible; }
--></style>
		<script type="text/javascript" src="_common/js/mootools.js"></script>
		<script type="text/javascript" src="imageMenu.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script> 
<script src="thumbs.js" type="text/javascript"></script>
<script>

var $j = jQuery.noConflict();

// on utilise maintenant jQuery via $j(...)

//exemple



$j('#test').show();



// motools avec $(...)



</script>


</head>
<body margin: 0; text-align: center; leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">

<div id="cadre">
<div id="logo"></div>
<ul id="imageMenu"> 
	<li class="societe"><a href="societe.html"></a></li> 
	<li class="productions"><a href="production.html"></a></li> 
	<li class="produits"><a href="produits.html"></a></li> 
	<li class="contact"><a href="contact.html"></a></li> 
</ul>

<div id="fondproduits"></div><div id="texte">Provherbes établissement en nom propre crée en octobre 1987.<br>
Nombre de personnes travaillant à temps complet dans lentreprise*:10 <br>
Létablissement se situ dans le sud de la france , au centre dun triangle défini par Arles, Nîmes, Avignon à distance égale des portes de la Camargue , des pieds du mont Ventoux et des prémisses des Cévennes.</div>



				
				<script type="text/javascript"> 
	window.addEvent('domready', function(){
		var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:385, border:0});
	});
</script>



<ul id="thumbs">		
  <li> 
    <a href="img/grand/produit-01.png">
      <img alt="Présentoir étuis herbes de Provence" 
        src="img/vignettes/produit-01.gif" /> 
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-02.png"> 
      <img alt="Étui herbes de Provence spécial poisson" 
        src="img/vignettes/produit-02.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-03.png">  
      <img alt="Étui herbes de Provence spécial Pâte, tomate, pizza" 
        src="img/vignettes/produit-03.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-04.png">  
      <img alt="Étui herbes de Provence spécial grillade, marinade, ragoût" 
        src="img/vignettes/produit-04.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-05.png">  
      <img alt="Étui herbes de Provence spécial fromage" 
        src="img/vignettes/produit-05.gif" />  
    </a> 
  </li> 
  
 <li> 
    <a href="img/grand/produit-06.png">  
      <img alt="Étui herbes de Provence Bio spécial mijoté, barbecue, marinade " 
        src="img/vignettes/produit-06.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-07.png">  
      <img alt="Étui herbes de Provence spécial agneau" 
        src="img/vignettes/produit-07.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-08.png">  
      <img alt="Présentoir étuis herbes de Provence" 
        src="img/vignettes/produit-08.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-09.png">  
      <img alt="Étui thym" 
        src="img/vignettes/produit-09.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-10.png">  
      <img alt="Étui laurier" 
        src="img/vignettes/produit-10.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-11.png">  
      <img alt="Étui thym/laurier" 
        src="img/vignettes/produit-11.gif" />  
    </a> 
  </li> 
  <li> 
    <a href="img/grand/produit-12.png">  
      <img alt="Présentoir étuis thym, laurier, thym/laurier" 
        src="img/vignettes/produit-12.gif" />  
    </a> 
  </li> 
</ul></div>

							
	</body>
</html>

vector · 4 Novembre 2009

Pas compris ?

afficher/masquer calque dans feuille de style

vector

Membre actif

vector

Membre actif

Sujets similaires