J'ai perdu le visuel du "survol"

[petitefeuille]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Mozilla Firefox, Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : 22/09/15
Lien du forum : http://www.petitefeuille.net/

Description du problème

Bonjour,

J'ai installé une bannière défilante suite à ce tuto, je l'ai modifier pour la vitesse en me servant de ce tuto et là je n'ai plus la fonction de survoler l'image (l'effet loupe) .

Pouvez-vous m'aider s'il vous plait?

Merci d'avance, mes amitiés

petitefeuille

voici le CSS:

Code:

          /*Hauteur du menu*/
        .M14_pa { height:100px;background:#FFFFFF0;}
        /*Position des images dans le menu*/
        .M14_pa img{padding-top:30px;padding-left:10px;cursor:pointer;}
        /*Effet au survol des images avec reprise des tailles originales*/
        .M14_pa img:hover{padding-top:0;width:150px; height:104px;} 

voici le code Message sur la page d'accueil

Code:


<div align="center">
    <a href="http://www.petitefeuille.net/t9625-faites-vous-des-efforts-pour-lutter-contre-le-rechauffement-climatique"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/68971910.jpg" title="La question du jour" /></a>  <a href="http://www.petitefeuille.net/t9687-laffaire-volkswagen-prend-une-dimension-mondiale"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/index10.jpg" title="L’affaire Volkswagen prend une dimension mondiale" /></a> <a href="http://www.petitefeuille.net/t9658-des-chercheurs-francais-produisent-les-premiers-spermatozoides-in-vitro"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/index11.jpg" title="Des chercheurs français produisent les premiers spermatozoïdes in vitro" /></a>  <a href="http://www.petitefeuille.net/t9610-le-film-human"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/57450910.jpg" title="LE FILM HUMAN" /></a>  <a href="http://www.petitefeuille.net/t9688-comment-ikea-se-transforme-en-cauchemar-pour-les-couples"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/rtr4na10.jpg" title="Comment Ikea se transforme en cauchemar pour les couples" /></a>  <a href="http://www.petitefeuille.net/t9692-comment-les-energies-vertes-font-leur-chemin-dans-les-campagnes-francaises"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/index11.jpg" title="Comment les énergies vertes font leur chemin dans les campagnes françaises " /></a>  <a href="http://www.petitefeuille.net/t9689-tennis-noah-nouveau-capitaine-de-lequipe-de-france-de-tennis"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/index12.jpg" title="Noah, nouveau capitaine de l’équipe de France de TENNIS" /></a>  <a href="http://www.petitefeuille.net/t6409-les-images-insolites"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/images10.jpg" title="Les images insolites" /></a>
</div>

[Neptunia]

Bonjour ^^

Le CSS ne fonctionne plus puisque le code HTML n'utilise plus la classe M14_pa

Essayez de remplacer dans le code html :

Code:

<div align="center">

par

Code:

<div class="M14_pa" align="center">

[petitefeuille]

Bonjour Neptune-

merci beaucoup, je viens de faire la modif et rien ne se passe quand je survole avec la souris, je suis sous windows8 si cela peut vous aider

[Neptunia]

Désolé, je crains de ne pas pouvoir aider davantage

[petitefeuille]

pas de souci Neptune- merci tout de même

[Invité]

Salut petitefeuille,

il n'y a pas de balise marquee autour de la div.
Ton code html doit être comme ceci:

Code:

<marquee scrollamount="2">
   <div class="M14_pa" align="center">
          <a href="http://www.petitefeuille.net/t9625-faites-vous-des-efforts-pour-lutter-contre-le-rechauffement-climatique"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/68971910.jpg" title="La question du jour" /></a>  <a href="http://www.petitefeuille.net/t9687-laffaire-volkswagen-prend-une-dimension-mondiale"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/index10.jpg" title="L’affaire Volkswagen prend une dimension mondiale" /></a> <a href="http://www.petitefeuille.net/t9658-des-chercheurs-francais-produisent-les-premiers-spermatozoides-in-vitro"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/index11.jpg" title="Des chercheurs français produisent les premiers spermatozoïdes in vitro" /></a>  <a href="http://www.petitefeuille.net/t9610-le-film-human"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/57450910.jpg" title="LE FILM HUMAN" /></a>  <a href="http://www.petitefeuille.net/t9688-comment-ikea-se-transforme-en-cauchemar-pour-les-couples"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/rtr4na10.jpg" title="Comment Ikea se transforme en cauchemar pour les couples" /></a>  <a href="http://www.petitefeuille.net/t9692-comment-les-energies-vertes-font-leur-chemin-dans-les-campagnes-francaises"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/index11.jpg" title="Comment les énergies vertes font leur chemin dans les campagnes françaises " /></a>  <a href="http://www.petitefeuille.net/t9689-tennis-noah-nouveau-capitaine-de-lequipe-de-france-de-tennis"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/index12.jpg" title="Noah, nouveau capitaine de l’équipe de France de TENNIS" /></a>  <a href="http://www.petitefeuille.net/t6409-les-images-insolites"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/images10.jpg" title="Les images insolites" /></a>
   </div>
                    
</marquee>

a++

[petitefeuille]

Bonjour Milouze14,

En fait je ne la fait pas défilante, mais ça ne change pas le problème pour le lien survolé, rien ne se passe, que se soit avec ou sans la balise "marquee" et ce qui est bizarre, sans modif en prenant le code d'origine ça marche bien, donc où est le problème ? je bataille, mais je ne comprends pas !

Code:

<div class="M14_pa" align="center">
           <a href="http://www.petitefeuille.net/t9694-selon-vous-depuis-5-ans-votre-niveau-de-vie-a-t-il"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/0a949511.jpg" title="La question du jour" /></a>  <a href="httphttp://www.petitefeuille.net/t9695-jean-mercier-87-ans-juge-pour-avoir-aide-sa-femme-a-mourir"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/jean-m10.jpg" title="Jean Mercier, 87 ans, jugé pour avoir aidé sa femme à mourir " /></a>  <a href="http://www.petitefeuille.net/t9687-laffaire-volkswagen-prend-une-dimension-mondiale"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/index10.jpg" title="L’affaire Volkswagen prend une dimension mondiale" /></a> <a href="http://www.petitefeuille.net/t9696-un-guide-du-routard-dessine-pour-accompagner-les-refugies-a-leur-arrivee-en-france"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/refugi11.jpg" title="Un " guide="" du="" routard"="" dessiné="" pour="" accompagner="" les="" réfugiés="" à="" leur="" arrivée="" en="" france"="" /></a>  <a href="http://www.petitefeuille.net/t9610-le-film-human"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/57450910.jpg" title="LE FILM HUMAN" /></a>  <a href="http://www.petitefeuille.net/t9688-comment-ikea-se-transforme-en-cauchemar-pour-les-couples"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/rtr4na10.jpg" title="Comment Ikea se transforme en cauchemar pour les couples" /></a>  <a href="http://www.petitefeuille.net/t9697-ce-chien-a-fait-une-betise-et-s-excuse-d-une-maniere-inattendue"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/captur20.png" title="Ce chien a fait une bêtise et s'excuse d'une manière inattendue" /></a>  <a href="http://www.petitefeuille.net/t9689-tennis-noah-nouveau-capitaine-de-lequipe-de-france-de-tennis"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/index12.jpg" title="Noah, nouveau capitaine de l’équipe de France de TENNIS" /></a>     
</div>

[Invité]

Re,

effectivement car ton code html fonctionne parfaitement sur mon fofo de test avec la css associée.
As tu apporté quelque chose récemment sur ton forum ?
a++

[petitefeuille]

Re,

(...)
As tu apporté quelque chose récemment sur ton forum ?
a++

Non je n'ai rien fait depuis que j'ai fait cette bannière, mais je viens de m’apercevoir que juste la dernière image de droite fonctionne sur le survole et pas les autres ! J'ai tout revue et là franchement c'est un casse tête pour moi

[petitefeuille]

Re .. en faite, en ne mettant pas le lien de l'image(url) , l'image fait loupe, et quand je remets l'URL là ça ne fonctionne plus .......

[petitefeuille]

Bonjour,

Je reviens car là je suis surprise du résultat du code . Je travail comme sur le tuto en m’appliquant de bien faire attention. (voir code N°1)

une fois validé, tout mon code change , pourquoi ? voir mon code N°2 )

Code:

<a href="http://www.petitefeuille.net/t9699-un-poisson-mutant-peche-a-fukushima"><img src="http://i21.servimg.com/u/f21/15/86/06/11/captur27.jpg"width="100" height="72"title="Un poisson mutant pêché à Fukushima"></a>

*****************
Une fois poster et validé :

Code:

<a href="http://www.petitefeuille.net/t9699-un-poisson-mutant-peche-a-fukushima"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/15/86/06/11/captur27.jpg" title="Un poisson mutant pêché à Fukushima" /></a>

Donc une fois validé ça change, pourquoi ?

Je reste à votre disposition, merci d'avance

[petitefeuille]

Bonjour, j'ai essayer plusieurs tutos mais ça ne correspond pas avec ce code mis en place sur mon forum, est-ce qu'une personne peut m'aider a ajouter un code pour "un effet de zoom en css sur image" s'il vous plait ?

[Invité]

bonjour petitefeuille.

dans votre codage qui est comme ceci >>

Code:

<a href="http://www.petitefeuille.net/t9625-faites-vous-des-efforts-pour-lutter-contre-le-rechauffement-climatique"><img style="width: 100px; height: 72px;" src="http://i21.servimg.com/u/f21/17/08/84/19/68971910.jpg" title="La question du jour" /></a>


viré le style ^^
donc ont arrive a ceci >>

Code:

<a href="http://www.petitefeuille.net/t9625-faites-vous-des-efforts-pour-lutter-contre-le-rechauffement-climatique"><img src="http://i21.servimg.com/u/f21/17/08/84/19/68971910.jpg" title="La question du jour" /></a>

votre css est comme ceci >>

Code:

          /*Hauteur du menu*/
        .M14_pa { height:100px;background:#FFFFFF0;}
        /*Position des images dans le menu*/
        .M14_pa img{padding-top:30px;padding-left:10px;cursor:pointer;}
        /*Effet au survol des images avec reprise des tailles originales*/
        .M14_pa img:hover{padding-top:0;width:150px; height:104px;}

changé le pour celui la >>

Code:

          /*Hauteur du menu*/
        .M14_pa { height:100px;background:#FFFFFF0;}

        /*Position des images dans le menu*/
        .M14_pa img{width:100px;height;72px;padding-top:30px;padding-left:10px;cursor:pointer;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;}

        /*Effet au survol des images avec reprise des tailles originales*/
        .M14_pa img:hover{padding-top:0;width:150px; height:104px;}

faite un test

[petitefeuille]

Bonjour R-max,
Vous me laisser le temps de le faire de suite et j'arrive ensuite sur ce topic ...... merci

[petitefeuille]

ça va pas du tout

[Invité]

rempalcer le css par celui la j'avait fait une erreur

Code:

          /*Hauteur du menu*/
        .M14_pa { height:100px;background:#FFFFFF0;}
 
        /*Position des images dans le menu*/
        .M14_pa img{width:100px;height:72px;padding-top:30px;padding-left:10px;cursor:pointer;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;}
 
        /*Effet au survol des images avec reprise des tailles originales*/
        .M14_pa img:hover{padding-top:0;width:150px; height:104px;}

[petitefeuille]

par contre le survol marche très bien mais les images font désordres

[petitefeuille]

rempalcer le css par celui la j'avait fait une erreur

Code:

          /*Hauteur du menu*/
        .M14_pa { height:100px;background:#FFFFFF0;}
 
        /*Position des images dans le menu*/
        .M14_pa img{width:100px;height:72px;padding-top:30px;padding-left:10px;cursor:pointer;
-webkit-transition: all 0.7s;
-moz-transition: all 0.7s;
-o-transition: all 0.7s;
transition: all 0.7s;}
 
        /*Effet au survol des images avec reprise des tailles originales*/
        .M14_pa img:hover{padding-top:0;width:150px; height:104px;}

oh pardon on a écrit en même temps ... je fais la correction et je reviens

[petitefeuille]

R-max vous êtes un champion, un grand merci à vous , tout fonctionne à merveille et enfin je vais pouvoir arrêter de batailler merci encore et +1 et je clos le sujet.

Je vous souhaite une bonne fin d'après midi

petitefeuile

[Invité]

de rein et désolé de la petite erreur ,,

[petitefeuille]

ne vous inquiétez pas pour la petite erreur, vous avez fait un travail excellent merci