[Résolu] Dimension d’image lors du survol de la sourie

Suite à la migration du forum, chaque utilisateur devra lancer une procédure de réinitialisation du mot de passe pour pouvoir se connecter. Merci !

  • WordPress :4.7
  • Statut : résolu
6 sujets de 1 à 6 (sur un total de 6)
  • Auteur
    Messages
  • #1637761

    Hazay
    Participant
    Initié WordPress
    6 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 5.6.28 / 5.5.54
    • Thème utilisé : Amadeus (version gratuite)
    • Extensions en place : EWWW Image Optimizer (3.3.1), Forum_wordpress_fr (4.1), Leaflet Maps Marker (3.12), While Loading (3.0)
    • Nom de l’hébergeur : en local pour le moment
    • Adresse du site : en local pour le moment

    Problème(s) rencontré(s) :

    Mon problème est le suivant : j’ai différentes images qui permettent à l’utilisateur lorsque qu’il clique dessus d’être redirigé vers la catégorie qui corresponds à la vignette (pastille),

    Afin de donner un effet, les pastille sont juste des images  rangés dans un tableau qui se replacent lors du survol de la sourie (j’ai suivi ce tuto : https://www.emmanuelbeziat.com/blog/changer-une-image-au-survol/ )

    J’ai utilisé le code suivant :

    #pastilleurba a {
    	display: inline-block;
    	background: url("monimagequandmasouriepasse.jpg") no-repeat;
    }
    
    #pastilleurba a:hover img {
    	visibility: hidden;
    }

    Une pastille correspond à l’id de ma cellule (<td id= »nomdelapastille »>), ce qui équivaut à la div de l’exemple que j’ai suivi

     

    Cependant, quand je passe ma sourie sur mon image, l’image renvoyé est un zoom de l’image que je veux ( monimagequandmasouriepasse.jpg ) alors que les dimensions de l’image de base (hors passage de la sourie) et celle lors du passage de la sourie sont les mêmes, même si WordPress les redimensionnent pour les faire rentrer dans ma page

     

    J’aimerai que l’image lors du survol de ma sourie prennent les dimensions de l’image hors passage de la sourie, mais je ne vois pas quel propriété modifier,

     

    Merci à vous pour l’aide (super forum au passage, réponse rapide et claire, communauté à l’écoute, continuez comme ça !),

    Cordialement

    #1637987

    Flobogo
    Modérateur
    Maître WordPress
    12350 contributions

    Bonjour,

    Je pense que la solution se situe au niveau des indications données par l’auteur de l’article :

    je vous recommande aussi :
    De spécifier également la hauteur et la largeur de l’image
    En CSS si les images sont toutes de même dimension

    Autrement dit, pour vous, il faut mettre dans votre CSS (exemple si vos images font 200 x 50) :

    #pastilleurba a, #pastilleurba img {
        width: 200px;
        height: 50px;
    }

    Si ça ne suffit pas, il faut peut-être rajouter :

    #pastilleurba a:hover img {
        width: 200px;
        height: 50px;
    }

     

    NB : je déplace votre topic en rubrique « Divers / Discussion générale », car ça ne concerne pas du support spécifique WordPress.

    #1638081

    Hazay
    Participant
    Initié WordPress
    6 contributions

    Bonjour,

    le problème est que la dimension des images change en fonction d’où on consulte la page (pc, portable, tablette),

    Je vous ai joint le rendu quand je modifie la page visuellement (« Accueil visuel.png ») : voici le code html de cette page :

    <table id="table_pastille">
    <tbody>
    <tr>
    <td id="pastilleurba">
    	<a href="http://192.168.1.56/wordpress/urbanisme-reglementaire/">
    		<img class="alignnone size-medium wp-image-105" src="http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastille-urba.jpg" alt="Urbanisme" width="294" height="300" />
    	</a>
    </td>
    <td id="pastillecentreville">
    	<a href="http://192.168.1.56/wordpress/centre-ville/">
    		<img class="alignnone size-medium wp-image-102" src="http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastilles-centres-villes-V2.jpg" alt="Centres Villes" width="294" height="300" />
    	</a>
    </td>
    <td id="pastillequartier">
    	<a href="http://192.168.1.56/wordpress/quartier-dhabitation/">
    		<img class="alignnone size-medium wp-image-104" src="http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastille-lotissement-V2.jpg" alt="Quartier d'habitations" width="294" height="300" />
    	</a>
    </td>
    <td id="pastillezoneactivite">
    	<a href="http://192.168.1.56/wordpress/zone-dactivite/"> 
    		<img class="alignnone size-medium wp-image-107" src="http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastille-zone-activités-294x300.jpg" alt="Zone d'activités" width="294" height="300" /> 
    	</a>
    </td>
    <td id="pastilleparcjardin">
    	<a href="http://192.168.1.56/wordpress/parc-et-jardin/">
    		<img class="alignnone size-medium wp-image-105" src="http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastille-parcs-et-jardins-294x300.jpg" alt="Parcs et Jardins" width="294" height="300" /> 
    	</a>
    </td>
    <td id="pastillecimetiere">
    	<a href="http://192.168.1.56/wordpress/cimetiere/">
    		<img class="alignnone size-medium wp-image-103 aligncenter" src="http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastille-cimetieres-294x300.jpg" alt="Cimetières" width="294" height="300" />
    	</a>
    </td>
    </tr>
    </tbody>
    </table>
     

    (le width= »294″ et heighy= »300″ ce mets tout seul, c’est le format moyen fourni par WordPress)

    Sur le pc, ça me donne ce que vous trouverez dans le fichier « Accueil rendu.png »

     

    J’ai testé de mettre les images au même format que celui de wordpress (294×300) et utilisé la méthode CSS dites plus haut, et j’ai ce que j’obtiens dans le fichier « pastille quand taille 294×300.png » : l’image au survol de la sourie ne prends pas la même taille que l’image que j’ai fournis

     

    J’ai testé avec l’image en taille de base et j’ai toujours cet effet de zoom (voir « pastille quand la taille base.png » en fichier joint)

    Je voudrais une solution pour que les images s’adaptent à la taille des images peut importe l’outil utiliser pour visiter le site,

     

    Cordialement,

    • Cette réponse a été modifiée le il y a 4 jours et 17 heures par  Hazay.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #1638227

    Hazay
    Participant
    Initié WordPress
    6 contributions

    J’ai trouvé ma solution, si ça intéresse, dans mon cas, pour que l’image prenne la taille de mon container (un td), j’ai appliqué cela :

    #pastilleurba a {
    	display: inline-block;
    	background: url("http://192.168.1.56/wordpress/wp-content/uploads/2017/05/pastille-urba-sombre-1.jpg") no-repeat;
    	background-size: contain;
    	background-position: bottom;
    }

    Après faut jouer avec le background-position, dans mon cas l’image de base était positionné par rapport au bas de la cellule (<td id= »pastilleurba ») et l’image de fond était positionné par rapport au haut de la cellule (je ne sais pas pourquoi), d’où l’utilisation du background-position : bottom;

     

    Cordialement,

    #1638318

    Flobogo
    Modérateur
    Maître WordPress
    12350 contributions

    Tant mieux si vous avez trouvé, car moi, je n’aurais pas su vous aider plus. Et merci pour l’explication.

    #1638522

    Hazay
    Participant
    Initié WordPress
    6 contributions

    Je rajoute que si vous rencontrez le même problème que moi, utilisez des divs plutôt que d’un tableau, ça a beaucoup plus de gueule

6 sujets de 1 à 6 (sur un total de 6)
  • Vous devez être connecté pour répondre à ce sujet.