3 réponses
Bonjour,
Chez moi tout marche sans problème...
Le seul bémol est que javascript doit être activé sur l'ordinateur en question et qu'il faut attendre pour que la nouvelle photo charge...
Vous devriez charger dès le début vos deux photos (exemple la belle en image, la moins belle en fond de case du tableau) et en css, mettre img:hover{opacity:0;}, et mettre une durée de transition avec.
Chez moi tout marche sans problème...
Le seul bémol est que javascript doit être activé sur l'ordinateur en question et qu'il faut attendre pour que la nouvelle photo charge...
Vous devriez charger dès le début vos deux photos (exemple la belle en image, la moins belle en fond de case du tableau) et en css, mettre img:hover{opacity:0;}, et mettre une durée de transition avec.
Wouaw!
merci pour la réponse.
Mais je crains de n'avoir pas tout compris..
je récapitule:
si j'ai bien compris la photo en fond ne se charge pas si on ne passe pas la souris dessus, donc il faudrait un code qui fasse charger les deux photos en même temps.
Si javascript n'est pas a jour sur son ordi ça bug, donc il faudrait un code plus compatible.
par contre en CSS, je dois mettre img:............. et une durée de transition dont je ne comprends pas bien a quoi elle sert et surtout dans quel css et ou dans le css
mes questions:
je dois changer mon code dans le billet de la page ou changer le dans le CSS?
à quoi peux ressembler un code qui charge les deux photos en même temps?
et à quel endroit dans le CSS je dois mettre img:hover{opacity:0;} ?
je sais ça fait beaucoup de questions, mais comme je vous ai dit je suis ultra débutant.
merci
merci pour la réponse.
Mais je crains de n'avoir pas tout compris..
je récapitule:
si j'ai bien compris la photo en fond ne se charge pas si on ne passe pas la souris dessus, donc il faudrait un code qui fasse charger les deux photos en même temps.
Si javascript n'est pas a jour sur son ordi ça bug, donc il faudrait un code plus compatible.
par contre en CSS, je dois mettre img:............. et une durée de transition dont je ne comprends pas bien a quoi elle sert et surtout dans quel css et ou dans le css
mes questions:
je dois changer mon code dans le billet de la page ou changer le dans le CSS?
à quoi peux ressembler un code qui charge les deux photos en même temps?
et à quel endroit dans le CSS je dois mettre img:hover{opacity:0;} ?
je sais ça fait beaucoup de questions, mais comme je vous ai dit je suis ultra débutant.
merci
Pas de soucis, on est tous débutants à différents niveaux ^^ (on va pas parler de mes talents photographiques...)
Donc le css = la mise en forme du code html(=le fond)
En version simplifiée, dans la page en question, entre les balises <head> et </head>, vous insérez ces quelques lignes :
et dans votre code html, vous allez mettre
essayez et dîtes moi si ça marche (ps le jour où j'ai à retoucher une photo je viens vous voir hein ^^
Donc le css = la mise en forme du code html(=le fond)
En version simplifiée, dans la page en question, entre les balises <head> et </head>, vous insérez ces quelques lignes :
<style type="text/css">
.fond1,.fond2,.fond3,.fond4,.fond5,.fond6{
overflow:hidden;}
.fond1{
background-image:url("lecheminverslimage1.lextension");
background-size:cover;}
.fond2{
background-image:url("lecheminverslimage2.lextension");
background-size:cover;}
.fond3{
background-image:url("lecheminverslimage3.lextension");
background-size:cover;}
.fond4{
background-image:url("lecheminverslimage4.lextension");
background-size:cover;}
.fond5{
background-image:url("lecheminverslimage5.lextension");
background-size:cover;}
.fond6{
background-image:url("lecheminverslimage6.lextension");
background-size:cover;}
.labelleimage{
transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
opacity:1;
min-width:100%;
min-height:100%;}
.labelleimage:hover{
opacity:0}
</style>
et dans votre code html, vous allez mettre
<td class="fond1">
<img src="lecheminverslabelleimage1.lextension" class=labelleimage"/>
</td>
<td class="fond2">
<img src="lecheminverslabelleimage2.lextension" class=labelleimage"/>
</td>
<td class="fond3">
<img src="lecheminverslabelleimage3.lextension" class=labelleimage"/>
</td>
<td class="fond4">
<img src="lecheminverslabelleimage4.lextension" class=labelleimage"/>
</td>
<td class="fond5">
<img src="lecheminverslabelleimage5.lextension" class=labelleimage"/>
</td>
<td class="fond6">
<img src="lecheminverslabelleimage6.lextension" class=labelleimage"/>
</td>
essayez et dîtes moi si ça marche (ps le jour où j'ai à retoucher une photo je viens vous voir hein ^^
