Sujet Précédent Sujet Suivant

Survoler des images miniatures et les afficher dans un autre côté en grande tail

cs_mehdilies Messages postés 3 Date d'inscription jeudi 16 avril 2009 Statut Membre Dernière intervention 24 juillet 2009 - 24 juil. 2009 à 11:34
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 - 24 juil. 2009 à 13:47
Bonjour ,

j'ai trouvé ce code qui pourrais à peu près faire l'affaire.

==========C O D E ===========

echo'
';
echo'[# ';
echo'

';
echo'';
echo']';
echo'
';


========== fin C O D E ===========
précision:$Ref est la référence des produits correspondant à l'image.

=======C S S ================
<style>body {
background-color:white;
color:white;
height:1000px;
}

.img {
border:1px solid black;
}

.thumb {
float:right;
width:686px;
top:0;
left:0;
}

.thumb a {
margin:0;
text-decoration:none;
}

.thumb a:hover {
background-color:black;
}

.thumb a .grand {

float:left;
width:0;
}

.thumb a:hover .grand {
float:left;
top:122px;
left:0;
width:300px;
height:400px;

}
#PETIT{
float:right;
width:98px;
height:120px}

</style>
=======C S S ================


çA marche bien quand il y a une seul image ,mais quand il ya plus, ça part dans tous les sens ,à cause des divs je crois.

Moi je veux que un maximum de dix miniature s'affichent à droite, en deux colonnes et en passant avec la souris sur chaque miniature elle m'affiche l'image grande à gauche des miniature.Je veux aussi qu'on puisse afficher l'image de grande taille même en cliquant sur la miniature.

Tous ça se passera dans un onglet qui a 600 px de width.

Vous pouvez m'aider ?

Merci

5 réponses

Réponse 1 / 5
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
24 juil. 2009 à 12:10
Bonjour,

vous voulez, vous voulez....
ben, quand on veut on peut !
>>en passant avec la souris sur chaque miniature elle
>>m'affiche l'image grande à gauche des miniature.
en pur css
mais question :
"miniature" et "en grande taille" c'est la même
image dont on changerait la taille d'affichage
ou 2 images différentes ?
>>même en cliquant sur la miniature.
là, hors javascript point de salut, je pense

Cordialement [mon Site] [M'écrire] Bul
0
Réponse 2 / 5
cs_mehdilies Messages postés 3 Date d'inscription jeudi 16 avril 2009 Statut Membre Dernière intervention 24 juillet 2009
24 juil. 2009 à 12:29
Bonjour ,
Merci de m'avoir répondu aussi vite.
Je vous assure que je veux , mais malheureusement mais compétences me permettent pas de le faire et c'est pour ça que je fais appelle à vous.

Pour répondre à ta question ,oui la miniature et la grande taille c'est la même image que je redimensionne avec CSS.

ici c'est la miniature:

echo'

';


ici c'est l'image en taille réel (grande taille):

echo'';


J'espère que vous pourrez jeter un coup d'œil dessus .

Encore merci
0
Réponse 3 / 5
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
24 juil. 2009 à 12:56
ch'tiot exemple basique alors
pour le survol uniquement 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
img				{	border:0;	}
pre,img,span	{	display:inline;	}
a span 			{ 	display: none;	
position: absolute;
top: 20px;
left: 5px;
background:#FFFFDD;
}
a:hover span	{ 	display: inline;	}
</style>
</head>

&#9;&#9;&#9;


[# 

]
[# 

]

</html>


j'ai simplement

_ décalé vers la droite les images
avec quelques tabulations
rien n'empêche de faire ce décalage en mettant
un div vide float:left et de mettre les miniatures
dans un div aussi pour mieux les positionner
les unes par rapport aux autres
_ mis un zoom x 3
rien n'empêche de mettre une taille fixe
_ mis l'affichage grande taille en "absolute"
on peut peut-être faire autrement ?
....
0
Réponse 4 / 5
cs_mehdilies Messages postés 3 Date d'inscription jeudi 16 avril 2009 Statut Membre Dernière intervention 24 juillet 2009
24 juil. 2009 à 13:36
Merci pour le code:

je viens de l'adapter un peu ,mais il manque un truc pour que les miniatures se mettent bien sagement à droite en deux colonnes.Exemple avec 10 miniatures:
ima1 ima2
ima3 ima4
ima5 ima6
ima7 ima8
ima9 ima10 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type="text/css">

img				{	border:0;	}

pre,img,span	{	display:inline;	}

a span 			{ 	display: none;	

position: absolute;

top: 20px;

left: 5px;

background:#FFFFDD;

}

a:hover span	{ 	display: inline;	}

</style>

</head>



&#9;&#9;&#9;



[# 



]

[# 


 ]

[# 



]

[# 



]



</html>


Vous avez une idée?
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 5
Bul3 Messages postés 4933 Date d'inscription samedi 1 juillet 2006 Statut Membre Dernière intervention 2 février 2015 16
24 juil. 2009 à 13:47
il sert à quoi le float:left dans le span ?

>>miniatures se mettent bien sagement à droite
>>en deux colonnes
_ mettre dans un div avec une largeur adéquate
_ mettre dans un <table>
_ mettre des
là où il faut
_ ....
0

Discussions similaires

afficher un tableau en php
Larose_1921 -
s -

1 réponse
SELECTIONNER les 5 dernière ligne d'une table
nicomilville -
dac -

13 réponses
Récupérer les données d'une base de donnée dans un tableau.
clement.enj -
Sapht01 -

5 réponses
Comment afficher les caracteres arabes en menu
cs_lehcen -
djemmali -

8 réponses
recuperer les noms de champs d'une table
dimabab -
XARK -

13 réponses
Rejoignez-nous