Image d'une taille et son infobulle-image d'une autre taille

[Kerta]

Détails techniques

Version du forum : phpBB3
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : (lien masqué, vous devez poster pour le voir)

Description du problème

Bonjour,
Je m'excuse de vous déranger,
Merci pour votre aide...

En faite, j'ai une image:


De taille 40*40

Et j'ai une infobulle image dessus:


Je voudrais que l'infobulle reste de 40*40 mais que l'image sous <span> passe à 100*35

Code:

/*Partie partenaires*/
.partner {
  height: 100px;
    left: -525px;
    position: relative;
    top: 75px;
    width: 213px;
}
.partner img {
  height: 50px;
  width:50px;
  border-radius: 50px;
}
.part2{
  position: relative;
    text-align: center;
    width: 200px;
    top: 70px;
    left: -420px;
}

#partner1 {
  left: 5px;
    position: relative;
    top: -2px;
}
#partner2 {
    left: -70px;
    top: 10px;
    position: relative;
}
#partner3 {
    left: -70px;
    top: 10px;
    position: relative;
}
#partner4 {
    left: -70px;
    top: 10px;
    position: relative;
}
#partner5 {
    left: -70px;
    top: 10px;
    position: relative;
}
#partner6 {
    left: -70px;
    top: 10px;
    position: relative;
}
a.partv {
  display: inline-block;
}
a.partv span {
  display: none; /* On masque l'infobulle. */
}
a.partv:hover {
  background: none; /* Correction d'un bug d'Internet Explorer. */
  z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */ 
}
a.partv:hover span {
display: inline-block;
    height: 35px;
    position: absolute;
    text-align: center;
    width: 135px;
    top: -2px;
    left: -120px;
}


/*Fin partie partenaires*/

Code:

<td style="height: 125px;">
                                                                                                                                                                                                                                                                                                          
               <div class="partner">
                                          <a id="partner1" class="partv" href="lien"><img src="https://img4.hostingpics.net/pics/703841MAbouton2.png" /><span> <img src="https://img4.hostingpics.net/pics/703841MAbouton2.png" /></span> </a>       
               </div>
               
               <div class="part2">
                                                            <a href="http://newexitopia.forumactif.com/t50-demandes-de-partenariat"> Vous ? </a><br /><a href="http://newexitopia.forumactif.com/t44-nos-beaux-partenaires"> Tous </a>         
               </div>
                                                                                                                                                                
            </td>

Mais je dois avouer que je ne sais pas comment faire... Merci par avance pour votre aide

[Kerta]

Si quelqu'un a une idée... Je n'arrive tjrs pas régler la taille de l'infobulle sans que cela n'affecte l'image

[tupac]

Bonjour Kerta, en définissant la taille de l'image directement dans la balise IMG devrait résoudre le problème.

Code:

<img src=" votre image ici " alt="" height="40" width="40">

[Kerta]

Bonsoir,
J'ai essayé mais cela n'a rien changé... L'image sous infobulle n'a pas pris la taille de 100*35
Elle est restée de la taille de l'image de base

[tupac]

Le problème est que la class partner img englobe vos deux images donc celles-ci prennent logiquement la hauteur et largeur de 50px.

Supprimer ceci de votre css.

Code:

.partner img {
  height: 50px;
  width:50px;
  border-radius: 50px;
}

Remplacez le par celui-la.

Code:

.image_partv{
  height:50px;
  width:50px;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
}

Pour finir j'ai ajouté la class image_partv a votre première image comme ceci.

Code:

<div class="partner">
<a href="lien" class="partv" id="partner1">
<img src="https://img4.hostingpics.net/pics/703841MAbouton2.png" class="image_partv" /><span>
<img src="https://img4.hostingpics.net/pics/703841MAbouton2.png" /></span>
</a>                     
</div>

[Kerta]

Bonjour,
Le code fonctionne. Et je comprends mieux mon erreur. Je voyais bien que tout était englobé et que ça modifié le tout. Mais je n'avais pas la logique pour résoudre ce problème. Merci en tout de votre aide.
Bonne journée.