CSS - Affichage de plusieurs images au passage de la souris

[chamagne]

Bonjour
Au passage de la souris sur une miniature (64px), j'affiche 2 images (256px) qui apparaissent l'une sous l'autre.
Je souhaiterais les afficher côte à côte avec un espacement de 2px (avec mon code actuel les attributs hspace et vspace sont inopérants.
En images ça donne :
affichage normal

au passage de la souris sur la petite miniature de gauche

Mon code html pour la miniature de 64px :

<td><a class="tooltip" href="pancratium-maritimum/"><img src="pancratium-maritimum/p.jpg" border="1"><span><img src="pancratium-maritimum/1.jpg" width="256" /><img src="pancratium-maritimum/2.jpg" width="256" /></span></a></td>

La feuille de style attachée :

.tooltip { position:relative; } 
.tooltip span { display:none; } 
.tooltip span img { margin:0; } 
.tooltip:hover span
{
  display:block; 
  position:absolute;
	z-index:1000;
  width:auto;
  border:0px solid black;
  margin-top:-66px;
  margin-left:110px;
  overflow:hidden;
}

La page en question : http://www.afleurdepau.com/Flore/amaryllidaceae/index.php

Merci de m'aider, le CSS, c'est un peu du chinois pour moi
Bon Dimanche

 

[gotgot]

tu peux mettre un padding sur .tooltip span img { margin:0; }

 

[chamagne]

Bonjour
Enfin une réponse
Mais comment faire ça, j'ai essayé un style="padding:0; /" sur le <a ou sur les <img, ça ne change rien
Et dans mon style.css j'ai modifié .tooltip span img { margin:0; } en .tooltip span img { margin:0; padding:50; } pour voir, et ça ne change rien non plus
Vous l'ai dit, suis nul en css
Bonne journée

 

[bossboss]

tu les désires côtes à côtes

ne serait-ce pas

plus tot?

 display:inline;

que

 display:block;

 

[chamagne]

Ben ça ne change rien !
Le mystère reste entier

 

[fran6]

salut, dans .tooltip:hover span, remplace width:auto; par la largeur de tes 2 photos soit en gros width:520px;

 

[chamagne]

désolé, ça ne change rien non plus

 

[fran6]

c'est bizarre, ça fonctionne en local pour moi, tu as bien mis ?

.tooltip:hover span
{
  display:block;
  position:absolute;
   z-index:1000;
  width:520px;
  border:0px solid black;
  margin-top:-66px;
  margin-left:110px;
  overflow:hidden;
}

 

[chamagne]

Bonjour
"Bizarre, bizarre, vous avez dit bizarre !"
J'avais dans mon css width="256px", ça ne marche pas
Je change en width="520px", ça marche
Je pinaille au pixel pour que les 2 images tiennent juste dans la largeur de la colonne
J'insère une image vide de 1px entre les 2
Et j'ai le résultat espéré
Voir http://www.afleurdepau.com/Flore/amaryllidaceae/index.php
Je récapitule :
Fichier css

.tooltip { position:relative; } 
.tooltip span { display:none; } 
.tooltip span img { margin:0; } 
.tooltip:hover span
{
  display:block; 
  position:absolute;
	z-index:1000;
  width:520px;
  border:0px solid black;
  margin-top:-66px;
  margin-left:107px;
  overflow:hidden;
}

et le code du <td> de mon tableau qui fera apparaître les 2 images dans la colonne suivante au passage de la souris sur la miniature :

<td width="64">
<a class="tooltip" href="lien vers la fiche d'espèce">
<img src="miniature" border="1" />
<span><img src=1ère image" width="256" valign="top" /><img src="image vide" width="1" /><img src="2ème image" width="256" valign="top" /></span>
</a>
</td>

MERCI à tous, mais ça reste bizarre !
Bonne journée

 

[zikeur54]

Bonjour, si je peux aider on ne sait jamais. La page d'accueil d'un de mes sites a cette particularité que l'image change en une deuxième image au passage de la souris.

http://idee-etc.com/

Si c'est pas une bonne réponse à votre question, je m'en excuse par avance.

 

[chamagne]

Merci zikeur mais ce que tu proposes est bien facile et mon problème a désormais sa solution (voir ci-dessus)
Bonne soirée

 

[si-haut]

Je te comprend Chamagne sur le pinaillage et l’orfèvrerie au pixel près. Mais on est content quand ça marche.

PS : Zikeur, ton site aurait besoin d'un bon petit lifting

 

[zikeur54]

Je te comprend Chamagne sur le pinaillage et l’orfèvrerie au pixel près. Mais on est content quand ça marche.

PS : Zikeur, ton site aurait besoin d'un bon petit lifting

Je sais, je suis dessus en ce moment. Je l'ai abandonné depuis au moins 10 mois. Trop occupé sur le site de ma petite boutique.

A ce propos, c'est dingue comme on peut retrouver ces anciens sites web quand on ne les visitent plus. J'ai 3 sites web et un forum et ma boutique. Je rencontre forcément des limites puisque j'édite seul. Je suis donc obligé de ne pas me rendre compte des problèmes lorsque qu'on "abandonne" des sites web qui restent en ligne.

On crois qu'on va retrouver nos sites web intact et ce n'est pas toujours le cas. La police de caractère avait changé toute seule, je viens de la rétablir.

 

[si-haut]

Ça va notamment changer en fonction des navigateurs.

Mettre dans le cahier des charges des vieux navigateurs et réussir à tout faire fonctionner dessus.

 

[chamagne]

J'ai le même pb, site datant de l'an 2000, me suis collé à la mise à jour depuis juillet, plus de 1200 pages revues, il ne m'en reste que plus de 7000 à voir !!!
Dire qu'en l'an 2000 je n'osais dépasser des images de 350px en basse résolution !