aide codage sur transition

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

c'est pas que je saute du coq à l'âne mais je saute de site en forum

donc je me lance laborieusement dans un truc un peu plus spécial
et évidement, ça bloque
je pourrais laisser comme cela mais ça ne me convient pas car ce n'est pas ce que je veux faire

donc j'explique : ça serait mieux

je souhaite faire un onglet de navigation en images de 280X200 et quand on passe le curseur sur une image, un bloc de titres de pages apparait.
Facile, hein !
Sauf que j'aimerais en prime que les écritures non lues soient en opacité réduite
j'ai trouvé le code

mais je le place mal, du coup, mes images disparaissent aussi :pleure:

je n'arrive pas à trouver où mettre ce code pour que les images restent visibles à 100% (et éventuellement le nec plus ultra seraient que les images deviennent invisibles quand on les survolent -le contraire des titres, quoi-)

voici mon essais

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Menu déroulant avec effets</title>
<style>
ul#principal
{
list-style: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
border: 1px solid black;
width: 880px;
height:210px;
background: -moz-linear-gradient(top, #E3DBC8, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E3DBC8), to(#FFFFFF));
font-size: 20px;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
}

ul#principal li
{
float: left;
padding-right: 5px;
padding-left: 5px;
opacity: .2;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

ul#principal li a
{
text-decoration: none;
   color: black;
}

#elevage
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
background: -moz-linear-gradient(top, #E0C5CC, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E0C5CC), to(#FFFFFF));
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
width: 220px;
}

   #toilettage
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
background: -moz-linear-gradient(top, #CBE0C9, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CBE0C9), to(#ffffff));
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
width: 220px;
}

   #notes
{
display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
background: -moz-linear-gradient(top, #C7EDF2, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C7EDF2), to(#ffffff));
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
width: 220px;
}

#principal li:hover
{
opacity: 1;

}

#principal li:hover > #elevage
{
display: block;
position: absolute;
top: 43px;
}

   #principal li:hover > #toilettage
{
display: block;
position: absolute;
top: 43px;
}

   #principal li:hover > #notes
{
display: block;
position: absolute;
top: 43px;
}


</style>

</head>
<body>
<ul id="principal">
<li><a href="http://nbcat.bb-fr.com/h1-elevage"><img src="http://i40.servimg.com/u/f40/09/00/69/18/elevag10.png" alt="Fiches Techniques Elevage" title="Les fiches techniques Elevage" border="0"/></a>
<ul id="elevage">
<li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
<li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li>
<li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li>
</ul>
</li>
<li><a href="http://nbcat.bb-fr.com/h2-toilettage"><img src="http://i40.servimg.com/u/f40/09/00/69/18/toilet10.png" alt="Fiches Techniques Toilettage" title="Les fiches techniques Toilettage" border="0"/></a>
<ul id="toilettage">
<li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li>
<li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li>
<li><a href="page2-3.htm">Page 2 - Sous-page 3</a></li>
</ul>
</li>
<li><a href="http://nbcat.bb-fr.com/h3-notes"><img src="http://i40.servimg.com/u/f40/09/00/69/18/notes10.png" alt="Fiches Techniques Bloc-Notes" title="Les fiches techniques Bloc-Notes" border="0"/></a>
<ul id="notes">
<li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li>
<li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li>
<li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>
</ul>
</li>
</ul>
</body>
</html>

Mouhahahaha Very Happy

Si je dis que j'ai rien compris, tu me fusilles ou pas ? :rire:

Ahem. Oublions l'histoire des onglets pour se mettre d'accord sur l'effet du texte Smile

Donc en gros, tu as plusieurs blocs de texte en opacité réduite. Quand la souris passe sur un texte, celui-ci doit devenir bien lisible ?

Citation:

je n'arrive pas à trouver où mettre ce code pour que les images restent visibles à 100% (et éventuellement le nec plus ultra seraient que les images deviennent invisibles quand on les survolent -le contraire des titres, quoi-)

Fiou...

-> toutes les images visibles
-> chaque image contient des infobulles qui contiennent des titres
-> dans les infobulles, les titres sont en opacité faibles, mais quand la souris en survole un, celui-ci devient bien opaque

C'est ça ou je suis au fond de l'étang ?

_________________

SoP Story :: Votes pour la 3ème épreuve

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

non, j'ai l'habitude
ça vient de moi, je suis de trop mes idées

attends une photo

en rouge, mes images sont effacées et apparaissent quand le curseur passe : mais je souhaiterais l'inverse : qu'elles s'éffacent quand le curseur passe

et en vert, c'est ce que je veux, donc pas touche !!

moi mieux côser à toi ?? lol

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Menu déroulant avec effets</title>
<style>

ul#principal
{
list-style: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
border: 1px solid black;
width: 880px;
height:210px;
background: -moz-linear-gradient(top, #E3DBC8, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E3DBC8), to(#FFFFFF));
font-size: 20px;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
}

ul#principal li
{
float: left;
padding-right: 5px;
padding-left: 5px;
}

ul#principal li a
{
text-decoration: none;
   color: black;
}

   .pages
   {
   display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
   -webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
width: 220px;
   }

#elevage
{
background: -moz-linear-gradient(top, #854C5A, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#854C5A), to(#FFFFFF));

}

   #toilettage
{
background: -moz-linear-gradient(top, #B9CCB7, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#B9CCB7), to(#ffffff));
}

   #notes
{
background: -moz-linear-gradient(top, #A42F25, #ffffff);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#A42F25), to(#ffffff));
}

#principal li:hover
{
opacity: 1;

}

#principal li:hover > #elevage
{
display: block;
position: absolute;
top: 43px;
}

   #principal li:hover > #toilettage
{
display: block;
position: absolute;
top: 43px;
}

   #principal li:hover > #notes
{
display: block;
position: absolute;
top: 43px;
}

   ul.pages li
{
float: left;
padding-right: 5px;
padding-left: 5px;
opacity: .2;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

   ul.pages li a
{
text-decoration: none;
   color: black;
}

</style>

</head>
<body>
<ul id="principal">
<li><a href="http://nbcat.bb-fr.com/h1-elevage"><img src="http://i40.servimg.com/u/f40/09/00/69/18/elevag10.png" alt="Fiches Techniques Elevage" title="Les fiches techniques Elevage" border="0"/></a>
<ul class="pages" id="elevage">
<li><a href="page1-1.htm">Page 1 - Sous-page 1</a></li>
<li><a href="page1-2.htm">Page 1 - Sous-page 2</a></li>
<li><a href="page1-3.htm">Page 1 - Sous-page 3</a></li>
</ul>
</li>
<li><a href="http://nbcat.bb-fr.com/h2-toilettage"><img src="http://i40.servimg.com/u/f40/09/00/69/18/toilet10.png" alt="Fiches Techniques Toilettage" title="Les fiches techniques Toilettage" border="0"/></a>
<ul class="pages" id="toilettage">
<li><a href="page2-1.htm">Page 2 - Sous-page 1</a></li>
<li><a href="page2-2.htm">Page 2 - Sous-page 2</a></li>
<li><a href="page2-3.htm">Page 2 - Sous-page 3</a></li>
</ul>
</li>
<li><a href="http://nbcat.bb-fr.com/h3-notes"><img src="http://i40.servimg.com/u/f40/09/00/69/18/notes10.png" alt="Fiches Techniques Bloc-Notes" title="Les fiches techniques Bloc-Notes" border="0"/></a>
<ul class="pages" id="notes">
<li><a href="page3-1.htm">Page 3 - Sous-page 1</a></li>
<li><a href="page3-2.htm">Page 3 - Sous-page 2</a></li>
<li><a href="page3-3.htm">Page 3 - Sous-page 3</a></li>
</ul>
</li>
</ul>
</body>
</html>

bon, j'ai trituré mon neurone et j'ai trouvé où mettre la transition
mais si je veuX "effacer l'image au survol de la souris, tout s'efface, les infobulles avec, cest un peu con

j'en demande de trop, donc je m'arrete là avant de faire des bétises
c'est déjà pas mal

Coucou Miss Smile

Voilà donc ce qu'on va faire :

1/ On va donner un nom de class à tes images (par exemple "mes_img")

2/ Dans le css, on va baisser l'opacité des images .mes_img

3/ Toujours dans le css, on va modifier le .mes_img:hover en appliquant ici la transition + le changement d'opacité

Donc concrétement

-> html

Code:

-> Ajout dans le css

Code:

ul#principal li img.img{
opacity: .2;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

ul#principal li img.img:hover{
opacity: 1;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

J'espère avoir bien compris ce que tu voulais

_________________

SoP Story :: Votes pour la 3ème épreuve

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

je vois ça la tête reposée le week-end prochain et je te redis
cheers

Ok d'acc ^^ Je patiente ^^

_________________

SoP Story :: Votes pour la 3ème épreuve

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

Code:

<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8" />
<title>Menu déroulant avec effets</title>
<style>

/* cadre principal */

ul#principal
{
list-style: none;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
border: 1px solid black;
width: 880px;
height:210px;
background: -moz-linear-gradient(top, #E3DBC8, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E3DBC8), to(#FFFFFF));
font-size: 20px;
-moz-box-shadow: 5px 5px 5px grey;
-webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
}

ul#principal li
{
float: left;
padding-right: 5px;
padding-left: 5px;
}

ul#principal li a
{
text-decoration: none;
   color: black;
}

/* infobulles */
   .pages
   {
   display: none;
list-style-type: none;
margin: 0;
padding: 0;
border: 0;
   background: -moz-linear-gradient(top, #E3DBC8, #FFFFFF);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E3DBC8), to(#FFFFFF));
   -webkit-box-shadow: 5px 5px 5px grey;
-khtml-box-shadow: 5px 5px 5px grey;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;
width: 280px;
   }

/* Transition sur images*/

   ul#principal li img.images{
opacity: 1;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

ul#principal li img.images:hover{
opacity: .2;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

   /* Transition sur infobulles*/

#principal li:hover
{
opacity: 1;

}

#principal li:hover > .pages
{
display: block;
position: absolute;
top: 2px;
   overflow : auto;
   height: 220px;
   width: 280px;
}


   ul.pages li
{
float: left;
padding-right: 5px;
padding-left: 5px;
opacity: .2;
-moz-transition: all .5s ease-in;
-webkit-transition: all .5s ease-in;
-o-transition: all .5s ease-in;
}

   ul.pages li a
{
text-decoration: none;
   color: black;
}

   /* les fieldsets */


   .cadres
   {
   border: outset 3px black;
   -webkit-border-radius: 10px;
-khtml-border-radius: 10px;
-ms-border-radius: 10px;

   }

.titres
   {
   color: black;
   text-align: left;
   font-weight: bolder;
   font-style: italic;
   }


</style>

</head>
<body>
<ul id="principal">
<li><a href="http://nbcat.bb-fr.com/h1-elevage" target="_parent"><img src="http://i40.servimg.com/u/f40/09/00/69/18/elevag10.png" alt="Fiches Techniques Elevage" title="Les fiches techniques Elevage" border="0" class="images"/></a>
<ul class="pages">
   <fieldset class="cadres" ><legend class="titres">Les cartes des éleveurs</legend>
<li><a href="http://nbcat.bb-fr.com/h5-carte-des-eleveurs-canins" target="_parent">Carte des Eleveurs Canins</a></li>
<li><a href="http://nbcat.bb-fr.com/h6-carte-des-eleveurs-felins" target="_parent">Carte des Eleveurs Félins</a></li>
   </fieldset><br/>
   <fieldset class="cadres" ><legend class="titres">Les papiers</legend>
<li><a href="http://nbcat.bb-fr.com/h9-conseils-lors-de-la-vente-d-un-chiot" target="_parent" >Conseils lors de la vente d'un chiot</a></li>
   </fieldset>
</ul>
</li>
<li><a href="http://nbcat.bb-fr.com/h2-toilettage" target="_parent"><img src="http://i40.servimg.com/u/f40/09/00/69/18/toilet10.png" alt="Fiches Techniques Toilettage" title="Les fiches techniques Toilettage" border="0" class="images"/></a>
<ul class="pages">
   <fieldset class="cadres" ><legend class="titres">La carte des toiletteurs</legend>
<li><a href="http://nbcat.bb-fr.com/h4-carte-des-toiletteurs" target="_parent">Carte des Toiletteurs</a></li>
   </fieldset><br/>
   <fieldset class="cadres" ><legend class="titres">Les fiches de toilettage</legend>
<li><a href="http://nbcat.bb-fr.com/h7-toilettage-du-york-en-new-look" target="_parent">Le York en New-Look</a></li>
</fieldset>
</ul>
</li>
<li><a href="http://nbcat.bb-fr.com/h3-notes" target="_parent"><img src="http://i40.servimg.com/u/f40/09/00/69/18/notes10.png" alt="Fiches Techniques Bloc-Notes" title="Les fiches techniques Bloc-Notes" border="0" class="images"/></a>
<ul class="pages">
   <fieldset class="cadres" ><legend class="titres">Les Photos</legend>
<li><a href="http://nbcat.bb-fr.com/h8-photographier-son-chien-ou-son-chat" target="_parent">Photographier son chien ou son chat</a></li>
   </fieldset><br/>
   </ul>
</li>
</ul>
</body>
</html>

voici mon code

donc le code fonctionne super bien .... s'il n'y avait pas les infobulles
c'est sur le portail (http://nbcat.bb-fr.com) : comme c'est dans une iframe, j'ai utilisé pour ne pas que le cadre "foire" des ascenseurs (overflaw), sinon les infobulles font dévier les cadres, ou passent dessous, bref la panique

mais du coup, ça empêche les images dessous de disparaitre

j'ai donc mis un fond dégradé et non pas transparent, qui masque les images et rende le texte lisible

Coucou

Alors on est bien d'accord : les images sont un peu transparente quand la souris n'est pas dessus ?

_________________

SoP Story :: Votes pour la 3ème épreuve

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

non, c'est le contraire pour les images :rire:

mais quand la souris passe dessus, le cadre des infobulles empeche le bon déroulement de l'"extinction de l'image" puisque le curseur rencontre l'infobulle et non plus l'image
donc c'est impossible à faire ce truc dans les conditions que je voulais

je voyais des infobulles transparentes et l'image qui disparaissait derrière
mais vu les dimensions, c'est je pense infaisable

Bon je regarde ça en détail jeudi

*** note sur sa liste ***

_________________

SoP Story :: Votes pour la 3ème épreuve

Et si on mettait un peu de javascript ?

_________________

SoP Story :: Votes pour la 3ème épreuve

Bonjour ici Smile

Nbcat, tu javascript ou pas ? ^^'

TotOmM*

Date d'inscription: 16/06/2011 Distinctions: Déléguée de classe d'Août 2011

malheureusement, je n'ai pas le temps en ce moment de venir sur les forums
j'avais de belles ambitions mais je viens de céder mon forum à une tierce personne justement pour de graves soucis qui me sont tombés d'un coup sur le nez - c'est la vie

merci beaucoup pour tout ce que j'ai appris : ce n'est pas perdu car j'y reviendrais dans quelques mois mais pas maintenant

mes autres sujets peuvent etre archivés également - merci :pleure: